I have a main wrapper div that is set 100% width. Inside that i would like to have two divs, one that is fixed width and the other that fills the rest of the space. How do i float the second div to fill the rest of the space. Thanks for any help.
我有一个主包装器div,它设置为100%宽度。在里面我想要有两个div,一个是固定宽度的,另一个填充其余的空间。如何浮动第二个div以填充剩余的空间。感谢任何帮助。
7 个解决方案
#1
280
There are many ways to do what you're asking for:
有很多方法可以满足你的要求:
-
Using CSS
float
property:使用CSS浮动属性:
<div style="width: 100%; overflow: hidden;"> <div style="width: 600px; float: left;"> Left </div> <div style="margin-left: 620px;"> Right </div> </div>
-
Using CSS
display
property - which can be used to makediv
s act like atable
:使用CSS显示属性-可以用来使div像一个表格:
<div style="width: 100%; display: table;"> <div style="display: table-row"> <div style="width: 600px; display: table-cell;"> Left </div> <div style="display: table-cell;"> Right </div> </div> </div>
There are more methods, but those two are the most popular.
有更多的方法,但这两个是最流行的。
#2
119
CSS3 introduced flexible boxes (aka. flex box) which can also achieve this behavior.
CSS3引入了灵活的盒子。也可以实现这种行为。
Simply define the width of the first div, and then give the second a flex-grow
value of 1
which will allow it to fill the remaining width of the parent.
只需定义第一个div的宽度,然后为第二个div赋予1的浮动值,这将允许它填充父div的剩余宽度。
.container{
display: flex;
}
.fixed{
width: 200px;
}
.flex-item{
flex-grow: 1;
}
<div class="container">
<div class="fixed"></div>
<div class="flex-item"></div>
</div>
jsFiddle演示
Note that flex boxes are not backwards compatible with old browsers, but is a great option for targeting modern browsers (see also Caniuse and MDN). A great comprehensive guide on how to use flex boxes is available on CSS Tricks.
请注意,flex box并不向后兼容旧的浏览器,但是它是针对现代浏览器的一个很好的选择(参见Caniuse和MDN)。关于如何使用flex框的一个非常全面的指南在CSS技巧上是可用的。
#3
8
I have included a background colour in this example to help show where things are - and also what to do with content below the floated-area.
在这个示例中,我已经包含了背景颜色,以帮助显示内容的位置,以及如何处理浮动区域下面的内容。
Don't put your styles inline in real life, extract them into a style sheet.
不要把你的风格融入现实生活中,把它们放到样式表中。
<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>
JSFiddle
#4
7
I don't know much about HTML and CSS design strategies, but if you're looking for something simple and that will fit the screen automatically (as I am) I believe the most straight forward solution is to make the divs behave as words in a paragraph. Try specifying display: inline-block
我不太了解HTML和CSS的设计策略,但是如果你正在寻找一些简单的东西,并且它会自动地适合屏幕(就像我一样),我相信最直接的解决方案就是让div在段落中充当单词。尝试指定显示:inline-block
<div style="display: inline-block">
Content in column A
</div>
<div style="display: inline-block">
Content in column B
</div>
You might or might not need to specify the width of the DIVs
您可能需要也可能不需要指定div的宽度
#5
1
Give the first div a float left and fixed with, the second div 100% width an float left. That should do the trick. If you want to place items below it you need a clear:both on the item you want to place below
给第一个div一个浮动左固定,第二个div 100%宽度一个浮动左。这应该很管用。如果你想把项目放在它下面,你需要一个清晰的:两者都在你想放在下面的项目上
#6
1
If you're not tagetting IE6, then float the second <div>
and give it a margin equal to (or maybe a little bigger than) the first <div>
's fixed width.
如果您没有对IE6进行tagetting,那么将第二个
HTML:
HTML:
<div id="main-wrapper">
<div id="fixed-width"> lorem ipsum </div>
<div id="rest-of-space"> dolor sit amet </div>
</div>
CSS:
CSS:
#main-wrapper {
100%;
background:red;
}
#fixed-width {
width:100px;
float:left
}
#rest-of-space {
margin-left:101px;
/* May have to increase depending on borders and margin of the fixd width div*/
background:blue;
}
The margin accounts for the possibility that the 'rest-of-space' <div>
may contain more content than the 'fixed-width' <div>
.
保证金说明了'rest-of-space'
Don't give the fixed width one a background; if you need to visibly see these as different 'columns' then use the Faux Columns trick.
不要给固定的宽度一个背景;如果你需要看到这些不同的“列”,那么使用“假列”技巧。
#7
1
<div class="container" style="width: 100%;">
<div class="sidebar" style="width: 200px; float: left;">
Sidebar
</div>
<div class="content" style="margin-left: 202px;">
content
</div>
</div>
This will be cross browser compatible. Without the margin-left you will run into issues with content running all the way to the left if you content is longer than your sidebar.
这将是跨浏览器兼容。如果你的内容比你的侧边栏长,没有留空,你就会遇到内容一直往左边跑的问题。
#1
280
There are many ways to do what you're asking for:
有很多方法可以满足你的要求:
-
Using CSS
float
property:使用CSS浮动属性:
<div style="width: 100%; overflow: hidden;"> <div style="width: 600px; float: left;"> Left </div> <div style="margin-left: 620px;"> Right </div> </div>
-
Using CSS
display
property - which can be used to makediv
s act like atable
:使用CSS显示属性-可以用来使div像一个表格:
<div style="width: 100%; display: table;"> <div style="display: table-row"> <div style="width: 600px; display: table-cell;"> Left </div> <div style="display: table-cell;"> Right </div> </div> </div>
There are more methods, but those two are the most popular.
有更多的方法,但这两个是最流行的。
#2
119
CSS3 introduced flexible boxes (aka. flex box) which can also achieve this behavior.
CSS3引入了灵活的盒子。也可以实现这种行为。
Simply define the width of the first div, and then give the second a flex-grow
value of 1
which will allow it to fill the remaining width of the parent.
只需定义第一个div的宽度,然后为第二个div赋予1的浮动值,这将允许它填充父div的剩余宽度。
.container{
display: flex;
}
.fixed{
width: 200px;
}
.flex-item{
flex-grow: 1;
}
<div class="container">
<div class="fixed"></div>
<div class="flex-item"></div>
</div>
jsFiddle演示
Note that flex boxes are not backwards compatible with old browsers, but is a great option for targeting modern browsers (see also Caniuse and MDN). A great comprehensive guide on how to use flex boxes is available on CSS Tricks.
请注意,flex box并不向后兼容旧的浏览器,但是它是针对现代浏览器的一个很好的选择(参见Caniuse和MDN)。关于如何使用flex框的一个非常全面的指南在CSS技巧上是可用的。
#3
8
I have included a background colour in this example to help show where things are - and also what to do with content below the floated-area.
在这个示例中,我已经包含了背景颜色,以帮助显示内容的位置,以及如何处理浮动区域下面的内容。
Don't put your styles inline in real life, extract them into a style sheet.
不要把你的风格融入现实生活中,把它们放到样式表中。
<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>
JSFiddle
#4
7
I don't know much about HTML and CSS design strategies, but if you're looking for something simple and that will fit the screen automatically (as I am) I believe the most straight forward solution is to make the divs behave as words in a paragraph. Try specifying display: inline-block
我不太了解HTML和CSS的设计策略,但是如果你正在寻找一些简单的东西,并且它会自动地适合屏幕(就像我一样),我相信最直接的解决方案就是让div在段落中充当单词。尝试指定显示:inline-block
<div style="display: inline-block">
Content in column A
</div>
<div style="display: inline-block">
Content in column B
</div>
You might or might not need to specify the width of the DIVs
您可能需要也可能不需要指定div的宽度
#5
1
Give the first div a float left and fixed with, the second div 100% width an float left. That should do the trick. If you want to place items below it you need a clear:both on the item you want to place below
给第一个div一个浮动左固定,第二个div 100%宽度一个浮动左。这应该很管用。如果你想把项目放在它下面,你需要一个清晰的:两者都在你想放在下面的项目上
#6
1
If you're not tagetting IE6, then float the second <div>
and give it a margin equal to (or maybe a little bigger than) the first <div>
's fixed width.
如果您没有对IE6进行tagetting,那么将第二个
HTML:
HTML:
<div id="main-wrapper">
<div id="fixed-width"> lorem ipsum </div>
<div id="rest-of-space"> dolor sit amet </div>
</div>
CSS:
CSS:
#main-wrapper {
100%;
background:red;
}
#fixed-width {
width:100px;
float:left
}
#rest-of-space {
margin-left:101px;
/* May have to increase depending on borders and margin of the fixd width div*/
background:blue;
}
The margin accounts for the possibility that the 'rest-of-space' <div>
may contain more content than the 'fixed-width' <div>
.
保证金说明了'rest-of-space'
Don't give the fixed width one a background; if you need to visibly see these as different 'columns' then use the Faux Columns trick.
不要给固定的宽度一个背景;如果你需要看到这些不同的“列”,那么使用“假列”技巧。
#7
1
<div class="container" style="width: 100%;">
<div class="sidebar" style="width: 200px; float: left;">
Sidebar
</div>
<div class="content" style="margin-left: 202px;">
content
</div>
</div>
This will be cross browser compatible. Without the margin-left you will run into issues with content running all the way to the left if you content is longer than your sidebar.
这将是跨浏览器兼容。如果你的内容比你的侧边栏长,没有留空,你就会遇到内容一直往左边跑的问题。