Question

我的CSS布局有问题，如下所示：

#wrapper { 
 width: 80%;
} 

#content { 
 float: left;
 background: #FFFF00;
 height: 350px;
 width: 70%;
 display: inline;
}

#rightcolumn { 
 background: #EBE3CD;
 height: 350px;
 width: 30%;
 height: 250px;
 float: left;
}

#legendcolumn {
 background: #FF00FF;
 height: 100px;
 width: 30%;
 float: left;
}

我的HTML正文如下：

 <div id="wrapper">
  <div id="content">
   Main Content.
  </div>
  <div id="rightcolumn">
   Right Column.
  </div>
  <div id="legendcolumn">
   Here comes the legend.
  </div>
 </div>

 Lorem ipsum dolor sit amet.

不幸的是，文本 lorem ipsum dolor sit amet 被放置在布局旁边。但是，我想将文本放在布局正下方。如何在不引入新的 div 容器的情况下实现这一目标？

Answer 1

浮动和内联内容导致问题，但您可以使用溢出的力量来控制它：

#wrapper 
{  
  width: 80%; 
  overflow: auto;  // overflow + float = magic happy land
}

修改：你可以看到为什么显示：阻止和清除：如果你向border: 1px solid red;添加#wrapper，两者都无效。浮动的一个后果是容器将崩溃到它的非浮动子节点的高度（这里为零）。如果它们引用的元素为零高度，则Block和Clear将没有明显的影响（无论如何都会有块 - div本身是块）。溢出自动克服了这一点。

Answer 2

因为#wrapper的宽度设置只有80％，所以这些文本元素会尝试用它填充屏幕的其余20％。没有新div的确切解决方案，但我认为以下可能会解决方法：

#wrapper {
    width: 100%;
    padding-right: 20%:
}

Answer 3

更新您的CSS，如：

#wrapper { 
 width: 80%;
 display: block;
}

Answer 4

为什么#wrapper宽度为80％？ 100％代替。

CSS布局将文本放在它旁边而不是下面

4 个答案: