5

我正在尝试水平放置两个 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;
}

我想要的结果是这样的：

在此处输入图像描述

但这就是我得到的：

在此处输入图像描述

4

4 回答 4

7

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

JSFiddle在这里

.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;
}
于 2013-06-24T13:01:18.900 回答
2

尽管浮动通常用于这样的布局目的，但它最初是为浮动文本元素而设计的。这就是为什么浮动 div 在不熟悉浮动 div 时会表现得奇怪的原因。

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

看看这个：

用于不固定列的 HTML 动态布局的 CSS？

或者只是拿关于小提琴：

http://jsfiddle.net/TfuTE/

于 2013-06-24T13:05:57.530 回答
1

我认为限制.container为有一个特定的background-color可能很麻烦。我建议使用display: tablefor parent element 和display: table-cellfor children 来摆脱这个问题。

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

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

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

这是一个JSBin 演示

于 2013-06-24T13:05:36.807 回答
0

如果您使块级元素浮动，您的元素将不会是高度和宽度 100%，而是与它的内容一样大，或者与您使用 css 设置的一样大。

你可以用css给它一个高度

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

于 2013-06-24T12:59:38.177 回答