4

長方形のボックスがあるこのレイアウトが必要です。そして、左側のボックスの中にテキストがあり、右側に画像があります。テーブルなしでそれを行うと、フロートによってボックス内の要素が外側に表示されます。これを機能させるにはどうすればよいですか？

<div style="width: 100%;border-style:solid;">

    <span style="float: left;">  
         <h3> Your appointment Details</h3>
    </span> 
    <span style="float: right;">
        <img src="someImage"/>
    </span>

</div>
4

2 に答える 2

8

これを親コンテナに追加します。

.parent {
    overflow: hidden;
}

<div class="parent" style="width: 100%;border-style:solid;">

    <span style="float: left;">  
         <h3> Your appointment Details</h3>
    </span> 
    <span style="float: right;">
        <img src="someImage"/>
    </span>

</div>

ソリューションの例を含むjsfiddle

于 2013-03-12T14:59:00.930 に答える
2

ビリーモートによる答えはそれを行う正しい方法です。追加する別の方法もあります。フロートをクリアした状態で、親要素の最後に空の要素を追加できます。すなわち

.dummyClear{
   clear:both
}



<div style="width: 100%;border-style:solid;">    
    <span style="float: left;">  
         <h3> Your appointment Details</h3>
    </span> 
    <span style="float: right;">
        <img src="someImage"/>
    </span>
    <div class="dummyClear"></div> <!-- Any tag is fine -->

</div>
于 2013-03-12T15:21:07.540 に答える