1

我知道这是对浮动 CSS 布局的一种愚蠢怀疑，但我在任何地方都找不到答案。我想要一个简单的页面，中间有一个大的红色反应角，里面有 2 个蓝色方块，矩形的每一侧都有一个。我有以下 HTML 代码：

<body>
  <div id="rectangle">
    <div id="left"></div>
    <div id="right></div>
  </div>
</body>

然后我有这个CSS：

       #rectangle {
            width: 600px;
            margin: auto;
            padding: 50px;
            background-color: red;
        }
        #left {
            float: left;
            width: 250px;
            height: 250px;
            background-color: blue;
        }
        #right {
            float: right;
            width: 250px;
            height: 250px;
            background-color: blue;
        }

这不起作用，因为红色矩形没有调整它的高度来覆盖蓝色方块，因为我猜它们是浮动的......我知道解决这个问题的唯一方法是添加一个新的

<div id="footer"></div>

在矩形 div 的末尾，带有样式

clear: both;

我相信应该有一种更优雅的方式来做到这一点，不是吗？

4

2 回答 2

1

只需添加overflow: auto到#rectangle div。

示例：http: //jsfiddle.net/ZVJQN/

于 2012-12-08T04:18:04.650 回答
0

添加清晰的 div

<div id="rectangle">
    <div id="right"></div>
    <div id="left"></div>
      <div class="clear"></div>
  </div>​​​​​​

.clear
{
    clear:both;
}
​
于 2012-12-08T05:02:57.320 回答