DIV在CSS布局中低于其他DIV

Question

我正试图在我的网页上的＃about1，＃about2＃about3，＃about4和#twitter div之间实现这种布局。

#twitter div（右边的大div）低于左边的其他4个div（＃about1等）。

以下是我在线的网页，您可以在下面看到#twitter div：http://www.replyonline.co.uk/test/index.html

根据上面的视觉，我可以对标记或CSS做些什么来正确地确定这个位置？

#twitter{
width: 260px;
margin-bottom: 20px;
height: 290px;
overflow: auto;
font-size: 11px;
background: #ececec;
}

我是否需要在CSS或标记中添加任何内容？

非常感谢

Answer 1

你的推特div的宽度似乎有点太多了，让它落到下面。将它减少几个像素就可以解决这个问题。

我在Firefox中使用FireBug进行了尝试，并将正确的宽度固定为240px。

Answer 2

在我看来它正在发生，因为您网站上的“包装”div不够宽，无法容纳下面的所有方框。所以你可以通过调整div的大小来修复它，或者将下面的框放在一个单独的div中，而div不包含在“wrapper”中。

然而，这引入了一个新问题，因为这些4 + 1盒的流布局不正确。你可以修复的一种方法是添加“float：right;”到#twitter，并把它放在HTML中的4个框之前。

所以完整的结构将是：

<div wrapper></div>
<div wrapper2>
   <div twitter style="float:right"></div>
   <div box1></div>
   <div box2></div>
   ...
</div>