Question

我有这样的布局：

Header div
divLeft divRight
Footer div

divLeft是一堆文本，divRight是一个带有一些东西的div。 divLeft是一个更长的时间，我希望文本包装在divright之下。现在它只是制作两列，divRight下有很多空白区域。救命？谢谢！

4 个答案:

答案 0 :(得分：9)

答案 1 :(得分：0)

答案 2 :(得分：0)

答案 3 :(得分：0)

Answer 1

将divRight放在divLeft内并浮动它。

试试这个：

<强> CSS

<style type="text/css">
#primary, #header, #footer {
    float: left;
    width: 100%;
}

#secondary {
   float: right;
      width: 200px; /* or whatever width you want */
}
</style>

<强> HTML

<div id="header">
</div>
<div id="primary">
   <div id="secondary">
      <p>Put your content here that goes on the right</p>
   </div>
   <p>Put your content here<br /> 
      that goes on the left<br /> 
      and should wrap under the right-hand column</p>
</div>
<div id="footer">
</div>

Answer 2

你可以正确浮动divRight。这应该允许左div包装在正确的文本下。

编辑：如Donut所述，您还需要divLeft内的divRight。

Answer 3

我有一个非常好的解决方案;看一下示例here的来源。

Answer 4

将divRight放在divLeft中并为其提供以下属性：

.divRight {
    display: inline-block;
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    vertical-align: top;
    zoom: 1;
    *display: inline;
}

在div周围包装文本

4 个答案: