Html 并排显示两个 <div>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10006175/
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
Display Two <div>s Side-by-Side
提问by Jonathan Wood
My goal is to display two <div>s side-by-side with the content from both <div>s aligned at the top. I do not want long text in the second <div>to wrap underneath the first one.
我的目标是<div>并排显示两个s ，两个s 的内容<div>在顶部对齐。我不希望第二个中的长文本<div>包裹在第一个下面。
Finally, I do not want to set the width of the second <div>because I need the markup to work in different widths.
最后，我不想设置第二个的宽度，<div>因为我需要标记以不同的宽度工作。
Sample markup is below and at http://jsfiddle.net/rhEyM/.
示例标记位于http://jsfiddle.net/rhEyM/下方。
CSS
CSS
.left-div {
float: left;
width: 100px;
height: 20px;
margin-right: 8px;
background-color: linen;
}
.right-div {
float: left;
margin-left: 108px;
background-color: skyblue;
}?
HTML
HTML
<div class="left-div">
</div>
<div class="right-div">
My requirements are <b>[A]</b> Content in the two divs should line
up at the top, <b>[B]</b> Long text in right-div should not wrap
underneath left-div, and <b>[C]</b> I do not want to specify a
width of right-div. I don't want to set the width of right-div
because this markup needs to work within different widths.
</div>
?
?
采纳答案by Ray Toal
I removed the float from the second div to make it work.
我从第二个 div 中删除了浮动以使其工作。
回答by maxspan
Try to Use Flex as that is the new standard of html5.
尝试使用 Flex，因为这是 html5 的新标准。
http://jsfiddle.net/maxspan/1b431hxm/
http://jsfiddle.net/maxspan/1b431hxm/
<div id="row1">
<div id="column1">I am column one</div>
<div id="column2">I am column two</div>
</div>
#row1{
display:flex;
flex-direction:row;
justify-content: space-around;
}
#column1{
display:flex;
flex-direction:column;
}
#column2{
display:flex;
flex-direction:column;
}
回答by Dr.Kameleon
Try this :(http://jsfiddle.net/TpqVx/)
试试这个：（http://jsfiddle.net/TpqVx/）
.left-div {
float: left;
width: 100px;
/*height: 20px;*/
margin-right: 8px;
background-color: linen;
}
.right-div {
margin-left: 108px;
background-color: lime;
}??
<div class="left-div">
</div>
<div class="right-div">
My requirements are <b>[A]</b> Content in the two divs should line up at the top, <b>[B]</b> Long text in right-div should not wrap underneath left-div, and <b>[C]</b> I do not want to specify a width of right-div. I don't want to set the width of right-div because this markup needs to work within different widths.
</div>
<div style='clear:both;'> </div>
Hints :
提示：
- Just use
float:leftin your left-most div only. - No real reason to use
height, but anyway... - Good practice to use
<div 'clear:both'> </div>after your last div.
- 只
float:left在最左边的 div 中使用。 - 没有真正的理由使用
height，但无论如何...... <div 'clear:both'> </div>在最后一个 div 之后使用的好习惯。
