Question

我正在尝试水平放置两个div，但是第二个div的内容超过了第一个div的高度我得到了不好的结果：

这是我的Html代码：

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="mystyle.css"></head>
<body>

<div class="container">
<div class="yellow">sometext</div>
<div class="green">more text here more text here more text here more text here more     text here more text here more text here more text here more text here more text     here </div>
<div class="spacer"></div>
</div>
</body>

这是我的Css：

.yellow {
background-color: yellow;
margin: 2px;
float: left;
width: 100px;
text-align: center;
}

.green{
background-color: #00ff00;
      }

.container {
width: 30%;
}

.spacer {
 clear: both;
}

我想要的结果是：

enter image description here

但这就是我得到的：

enter image description here

Answer 1

为什么不使容器背景与第一个div的颜色相同，并将CSS更改为：

JSFiddle here

.yellow {
background-color: #00ff00;
margin: 2px;
float: left;
width: 100px;
text-align: center;
}

.green{
background-color: yellow;
    overflow: hidden;    <-- added
      }

.container {
width: 30%;
    background-color: #00ff00;  <-- added
}

.spacer {
 clear: both;
}

Answer 2

虽然float通常用于这样的布局目的，但它最初设计为 float 文本元素。这就是为什么浮动的div在不熟悉的情况下以奇怪的方式行事的原因。

除了文本格式问题之外，当您希望两个浮动元素具有相同的自动高度时，实际上还存在另一个难题。将display属性与table和table-cell一起使用，可以更好地实现这一目标。

看看这个：

CSS for HTML dynamic layout with not fixed columns?

或者只是采取相应的小提琴：

http://jsfiddle.net/TfuTE/

Answer 3

我认为将.container限制为具有特定background-color可能会很麻烦。我建议将display: table用于父元素，将display: table-cell用于儿童，以解决此问题。

只需在样式表中添加以下行：

.container {
  display: table;
  height: 100%;
}

.container > div {
  display: table-cell;
  height: inherit;
  vertical-align: top;
}

这是 JSBin Demo

Answer 4

如果你使一个块级元素浮动你的元素将不是100％的高度和宽度，但是它的内容大小，或者与你用css设置它一样大。

你可以用css给它一个高度

你可以给黄色div margin-left: 104px

漂浮后留下Div的麻烦

4 个答案: