我的目标是与顶部对齐的< div>的内容并排显示两个÷ div。我不想在第二个< div>中的长文本包裹在第一个下面。
最后,我不想设置第二个÷>的宽度。因为我需要标记以不同的宽度工作。
样品标记在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删除了浮动,使其工作。