html – 并排显示两个

前端之家收集整理的这篇文章主要介绍了html – 并排显示两个前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的目标是与顶部对齐的< div>的内容并排显示两个÷ div。我不想在第二个< div>中的长文本包裹在第一个下面。

最后,我不想设置第二个÷>的宽度。因为我需要标记以不同的宽度工作。

样品标记http://jsfiddle.net/rhEyM/以下。

CSS

  1. .left-div {
  2. float: left;
  3. width: 100px;
  4. height: 20px;
  5. margin-right: 8px;
  6. background-color: linen;
  7. }
  8. .right-div {
  9. float: left;
  10. margin-left: 108px;
  11. background-color: skyblue;
  12. }​

HTML

  1. <div class="left-div">
  2. &nbsp;
  3. </div>
  4. <div class="right-div">
  5. My requirements are <b>[A]</b> Content in the two divs should line
  6. up at the top,<b>[B]</b> Long text in right-div should not wrap
  7. underneath left-div,and <b>[C]</b> I do not want to specify a
  8. width of right-div. I don't want to set the width of right-div
  9. because this markup needs to work within different widths.
  10. </div>

解决方法

我从第二个div删除了浮动,使其工作。

http://jsfiddle.net/rhEyM/2/

猜你在找的HTML相关文章