5

2 つの div を水平に配置しようとしていますが、2 番目の 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

フロートはこのようなレイアウト目的でよく使用されますが、もともとはテキスト要素をフロートさせるために設計されました。これが、floated div に慣れていない人が奇妙な動作をする理由です。

テキストの書式設定の問題に加えて、2 つの浮動要素に同じ自動高さを持たせたい場合、実際には別の問題があります。displayこれは、プロパティをtableおよび と一緒に使用することで、はるかにうまく達成できますtable-cell。

これを見てください：

列が固定されていないHTML動的レイアウトのCSS?

または、関連するフィドルを取ります：

http://jsfiddle.net/TfuTE/

于 2013-06-24T13:05:57.530 に答える
1

.container特定のものに制限するのはbackground-color面倒かもしれません。この問題を解決するにはdisplay: table、親要素と子要素を使用することをお勧めします。display: table-cell

スタイルシートに次の行を追加するだけです。

.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にaを与えることができますmargin-left: 104px

于 2013-06-24T12:59:38.177 に答える