0

以下では、div A を 2 列のレイアウトとして機能させ、その下に他の div がある内側の div を配置します。ただし、画像が非常に高いため、次の div がその横になります。div B と C を画像の下に表示するにはどうすればよいですか?

<div id='A' style='position:relative'>
    <div id='A1' style='width:50%;float:left;'><img src="http://maps.googleapis.com/maps/api/staticmap?maptype=roadmap&sensor=false&size=100x100&markers=color:blue|label:A|51.535908,-0.066271&" /></div>
    <div id='A2' style='width:50%;float:left;'>Chelsea Branch<br/>Branch</div> 
</div>
<div id='B'>
    <b>Description:</b> <br />
    This is a location.
</div><br/>
<div id='C'>
    <b>Address:</b><br />
    123 Fake Stree<br />Chelsea<br />London<br />XH28 5JH<br />United Kingdom<br />
</div>
4

4 に答える 4

1

A1 と A2 の後に「クリア」を追加します。

<div id='A' style='position:relative'>
    <div id='A1' style='width:50%;float:left;'><img src="http://maps.googleapis.com/maps/api/staticmap?maptype=roadmap&sensor=false&size=100x100&markers=color:blue|label:A|51.535908,-0.066271&" /></div>
    <div id='A2' style='width:50%;float:left;'>Chelsea Branch<br/>Branch</div> 
    <div style="clear:both"></div>
</div>
<div id='B'>
    <b>Description:</b> <br />
    This is a location.
</div><br/>
<div id='C'>
    <b>Address:</b><br />
    123 Fake Stree<br />Chelsea<br />London<br />XH28 5JH<br />United Kingdom<br />
</div>
于 2012-06-13T07:33:22.890 に答える
1

<div id="A">フロートされている場合でも、その子孫要素を含める必要があります。

これは、何らかの理由で「クリアフィックス」と呼ばれ、いくつかの異なる方法があります。

この件に関しては、他にもいくつかのスタックオーバーフローの質問があります。

于 2012-06-13T07:37:45.157 に答える
0

これはそれを行います：

#a2 { clear: right; }
于 2012-06-13T07:38:06.993 に答える
0

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

clearfixにクラスを追加<div id='A' style='position:relative' class="clearfix">

これらのクラスを CSS ファイルにコピーします

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

clearfixフロート要素を持つ任意のコンテナに class を使用できます。

于 2012-06-13T07:39:07.710 に答える