0

コンテナの中に2つ<div>入っています。それらは左右の列として機能します。右側の列は高さが異なりますが、左側の列は 1 つの画像とテキストだけです。

float を使用せずに div ハックをクリアせずに、これらを正しく配置するにはどうすればよいですか? これらのスタイルを使用すると、追加の HTML と通常は過剰な CSS が必要になります。

jsFiddle では、列がまったく適切に動作しません。どちらもコンテナ div の先頭から開始する必要があります。

でこれを行うことができると思いますdisplay: inline-block。しかし、これを行うと、通常、列の1つが垂直方向に奇妙な位置に配置されます。

4

5 に答える 5

3

次のようなハックと HTML マークアップなしで float を使用できます。

CSS

.container {
    /* this clears the float */
    overflow: hidden;
}

.leftColumn {
    float:left;
}

.rightColumn {
    float:left;
}

変更箇所のみ掲載しました。

デモ: http://jsfiddle.net/NhS98/

于 2012-12-10T17:43:14.243 に答える
1

簡単な修正：

float: left;との両方.leftColumnに与え.rightColumnます。フロートをクリアするには、に与えoverflow: hidden;ます.container。

CSS

.container {overflow: hidden;}
.leftColumn, .rightColumn {float: left;}

フィドル： http： //jsfiddle.net/qYGeY/

于 2012-12-10T17:42:21.487 に答える
1

display inline-block が機能しない、または適切に配置されない理由は、inline-block が空白を考慮に入れるためです。

<div class="container"><div class="leftColumn">abc</div><div class="rightColumn">content</div></div>​

実際の例については、こちらを参照してください: http://jsfiddle.net/4NmMq/2/

マークアップの前に空白 (この場合はタブ) があると、ブラウザに表示されるため、位置合わせされていません。

于 2012-12-10T17:45:40.917 に答える
1

次のように、div を相対 div 内で絶対にします。

.container {
    background: rgb( 240, 240, 240);
    width: 300px;
    position:relative;
}

.leftColumn {
    display: block;
    position: absolute;
    top:0;
    left:0;
}

 .photoHolder {
    width: 40px;
    height: 50px;
    background: rgb(200, 200, 245);
}

.rightColumn {
    display: block;
    width: 250px;
    height: 400px;
    background: rgb( 200, 244, 244);
    position: absolute;
    top:0;
    right:0;
}

http://jsfiddle.net/yArWb/9/ <-- ここにフィドルがあります。</p>

于 2012-12-10T17:46:10.933 に答える
0

display: table-cell;およびdisplay: table;CSS プロパティを使用してこれを行うことができます。浮きません。清算なし。vertical-align:topコンテンツが div の上部に配置されるようにします。

jsFiddle の例

.container {
    background: rgb( 240, 240, 240);
    width: 300px;
    display:table;
}
.leftColumn {
    display: table-cell;
}
.photoHolder {
    width: 40px;
    height: 50px;
    background: rgb(200, 200, 245);
}
.rightColumn {
    display: table-cell;
    width: 250px;
    height: 400px;
    background: rgb( 200, 244, 244);
    vertical-align:top;
}

</p>

于 2012-12-10T17:40:55.077 に答える