Html 如何并排放置div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2637696/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to place div side by side
提问by markt
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.
我有一个设置为 100% 宽度的主包装 div。在里面我想要两个 div，一个是固定宽度，另一个填充其余空间。我如何浮动第二个 div 以填充其余空间。谢谢你的帮助。
回答by Crozin
There are many ways to do what you're asking for:
有很多方法可以满足您的要求：
Using CSS
floatproperty:<div style="width: 100%; overflow: hidden;"> <div style="width: 600px; float: left;"> Left </div> <div style="margin-left: 620px;"> Right </div> </div>Using CSS
displayproperty- which can be used to makedivs act like atable:<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>
使用CSS
float属性：<div style="width: 100%; overflow: hidden;"> <div style="width: 600px; float: left;"> Left </div> <div style="margin-left: 620px;"> Right </div> </div>使用CSS
display属性- 可用于使divs 表现得像 atable：<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.
还有更多的方法，但这两种是最受欢迎的。
回答by filoxo
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-growvalue of 1which will allow it to fill the remaining width of the parent.
只需定义第一个 div 的宽度，然后给第二个 div 一个flex-grow值，1该值将允许它填充父级的剩余宽度。
.container{
display: flex;
}
.fixed{
width: 200px;
}
.flex-item{
flex-grow: 1;
}
<div class="container">
<div class="fixed"></div>
<div class="flex-item"></div>
</div>
Note that flex boxes are not backwards compatible with old browsers, but is a great option for targeting modern browsers (see also Caniuseand MDN). A great comprehensive guide on how to use flex boxes is available on CSS Tricks.
请注意，弹性框不向后兼容旧浏览器，但它是定位现代浏览器的绝佳选择（另请参阅Caniuse和MDN）。CSS Tricks上提供了关于如何使用弹性框的全面指南。
回答by Guillermo Ruffino
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 表现得像在一个段落。尝试指定display: 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 的宽度
回答by Fenton
You can use CSS grid to achieve this, this is the long-hand version for the purposes of illustration:
您可以使用 CSS grid 来实现这一点，这是用于说明目的的长手版本：
div.container {
display: grid;
grid-template-columns: 220px 20px auto;
grid-template-rows: auto;
}
div.left {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: row1-start
grid-row-end: 3;
background-color: Aqua;
}
div.right {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end; 1;
background-color: Silver;
}
div.below {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end; 2;
}<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="below">Below</div>
</div>Or the more traditional method using float and margin.
或者使用浮动和保证金的更传统的方法。
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.left {
width: 200px;
float: left;
background-color: Aqua;
}
div.right {
margin-left: 220px;
background-color: Silver;
}
div.clear {
clear: both;
} <div class="left"> Left </div>
<div class="right"> Right </div>
<div class="clear">Below</div><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>
回答by RDL
<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.
这将是跨浏览器兼容的。如果您的内容比侧边栏长，如果没有左边距，您将遇到内容一直向左运行的问题。
回答by Rob
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% 宽度浮动左边。这应该够了吧。如果你想把项目放在它下面，你需要一个 clear:both 在你想放在下面的项目上
回答by Richard JP Le Guen
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，则浮动第二个<div>并给它一个等于（或可能略大于）第一个<div>固定宽度的边距。
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'<div>可能比 'fixed-width' 包含更多内容的可能性<div>。
Don't give the fixed width one a background; if you need to visibly see these as different 'columns' then use the Faux Columnstrick.
不要给固定宽度的一个背景；如果您需要明显地将这些视为不同的“列”，请使用Faux Columns技巧。
