Question

我在我的网站上使用以下div结构进行布局，

<div>
     <div style="float: left; width: 200px;">1</div>
     <div style="float: left;">2</div>
     <br style="clear: left;" />
</div>
<div>
     <div style="float: left; width: 200px;">3</div>
     <div style="float: left;">4</div>
     <br style="clear: left;" />
</div>

这个例子效果很好，输出如下，

1 2
3 4

我正在寻找。但是，当我将“4”文本设置为更长时，行为将更改为以下内容，

1 2
3 
44444444444444444444444444444444

虽然我期待以下，

1 2
3 44444444444444444444444444444..
  44444

我基本上可以使用两行，两列表，而不是挣扎于这个div问题。然而他们说使用div是一种更好的做法。那么，解决方案是什么？

Answer 1

为了达到预期的结果，最好将div 1和3包装在另一个（或任何元素，如果你想要语义）并将其浮动到左边，固定宽度和2和4在第二个容器中漂浮在它旁边。要获得你描述的包装，你也必须修复正确的容器，或者使用注释中建议的max-width，'word-wrap：break-word;'因为对于浏览器来说这是一个很长的词。

您可以这样做：

<div style="width: 30%; float:left;">
  <div>1</div>
  <div>3</div>
</div>
<div style="width: 70%; float: left; word-wrap: break-word;">
  <div>2</div>
  <div>4</div>
</div>

这是一个jsfiddle，所以你可以看到它在行动并玩它：http://jsfiddle.net/gSEtW/

注意：只使用div是不好的，你应该对HTML语义做一些研究。使用内联样式也很糟糕，您应该使用单独的样式表。

文本变长时行为会发生变化

1 个答案: