欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

两个div并排,右边的div需要铺满剩余空间?_html/css_WEB-ITnose

程序员文章站 2022-05-01 23:32:14
...
两个div并排,右边的div需要铺满剩余空间?该如何定义CSS

--%>    
DIV1
DIV2


两个div并排,右边的div需要铺满剩余空间?该如何定义CSS


回复讨论(解决方案)

你试试看div2右浮动,然后给两个div设置固定宽度,

div2 width: 85%;

你试试看div2右浮动,然后给两个div设置固定宽度,


右浮动?能给出具体的代码吗?

div2 width: 85%;


这个方法我用了,有没有更简便的方法?

第一种,都向左浮动, width 各占相应百分比(注意div1 ,div2 有padding margin 等属性会影响宽度 )
两div高度可以不一样,
div1 15% + div1 85% = 100% 宽



第二种 仅div1 左浮动,div2 100%宽(不浮动), div1 自然覆盖在div2上,再对div2做相应处理。
这种适合左边的高度 大于或等于右边的高度。
.div1 {
float: left; width: 15%;
background-color: lightseagreen;
}

.div2 {
width: 100%;
background-color: chocolate;
}

.div2增加属性

width: 85%;