0

我在我的网站上使用以下 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 是一种更好的做法。那么，解决方案是什么？

4

1 回答 1

0

为了达到您期望的结果，最好将 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 语义做一些研究。使用内联样式也很糟糕，您应该使用单独的样式表。

于 2013-04-25T08:34:27.233 回答