0

我的 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容器的情况下如何实现这一点？

4

4 回答 4

2

浮动和内联内容导致了问题，但您可以使用The Power of Overflow控制它：

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

编辑：您可以看到为什么 display:block 和 clear:both 如果添加border: 1px solid red;到#wrapper. 浮动的后果之一是容器将塌陷到它的非浮动孩子的高度（这里为零）。如果它们引用的元素高度为零，则 Block 和 Clear 的明显影响为零（无论如何，块都会有 - div 本身就是块）。溢出自动克服了这一点。

于 2010-11-17T08:53:58.957 回答
1

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

#wrapper {
    width: 100%;
    padding-right: 20%:
}
于 2010-11-17T08:46:56.377 回答
0

像这样更新你的 CSS：

#wrapper { 
 width: 80%;
 display: block;
}
于 2010-11-17T08:46:08.330 回答
0

为什么你的#wrapper宽度为 80%？改为 100%。

于 2010-11-17T08:46:58.880 回答