1

次のようなコンテンツを並べた複数の div が必要です

D1 D2 D3 D4 D5

D2 にはフォームが含まれています。フォームがなくても機能します (display:inline などを使用)。これはページ ヘッダーであるため、結果の HTML に改行があってはなりません。

どうすればそれを達成できますか？

更新ここに実際のコードがあります

<div id="sep">
  <img alt="separator" src="underline.jpg">
  <div id="block-search-0" class="block block-search">
     <div class="content" style="font-size: 11.52px;">
     <form id="search-block-form" method="post" accept-charset="UTF-8" action="/cms/admin/build/block">
       <div>
        <div class="container-inline">aaa</div>
       </div>
     </form>
    </div>
  </div>
  <div id="lang">
       <ul>
       <li class="fr first active"><a class="language-link active" href="/cms/admin/build/block">Français</a></li>
       <li class="en last active"><a class="language-link active" href="/cms/en/admin/build/block">English</a></li>
       </ul>
  </div>
  <div id="block-text_resize">
    <a id="text_resize_decrease" class="changer" href="javascript:;"><img alt="-" src="aSmall.gif"></a>
    <a id="text_resize_increase" class="changer" href="javascript:;"><img alt="+" src="aBig.gif"></a>
  </div>
  <div class="block-region">bla</div>
</div>

ここに示す改行は、実際のコードとは異なる場合があることに注意してください。明確にするために、いくつかの区切りが追加されています。

4

3 に答える 3

2

インライン要素 (display:inline) 内にブロック要素 (フォーム) を配置するとどうなるかわかりません。

div をブロック要素のままにして、次のように浮動させることができます。

#sep > div {
    float: left;
}

公式には、浮動要素にも幅を与える必要がありますが、それが本当に必要かどうか、状況で可能かどうかはわかりません。

于 2010-02-17T16:37:13.947 に答える
0

フォームの幅が、挿入する div に収まるようにしてください。firebug インスペクタを使用して確認します。

于 2010-02-17T16:16:08.000 に答える
0 
<div id="sep">
<div class="floated_container"></div>
<div class="floated_container">
  <form></form>
</div>
<div class="floated_container"></div>
<div class="floated_container"></div>
</div>

#sep {overflow:hidden;}
.floated_container {float:left;}

入れ子になったコンテナーが #sep の合計幅を超えないようにしてください。

于 2010-02-17T16:49:18.613 に答える