显示两个< div> s并排 [英] Display Two <div>s Side-by-Side
本文介绍了显示两个< div> s并排的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的目标是显示两个< div>
与< div>
s在顶部对齐。我不想让第二个< div>
中的长文本换行到第一个。
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>
的宽度,因为我需要标记以不同的宽度工作。
Finally, I do not want to set the width of the second <div>
because I need the markup to work in different widths.
示例标记位于 http://jsfiddle.net/rhEyM/ 下方。
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
<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中删除了float,使其工作。
I removed the float from the second div to make it work.
这篇关于显示两个< div> s并排的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文