2

私は液体レイアウトを持っています。2 つの div が水平方向に隣り合っており、使用可能な幅全体を占める必要があります。2 番目の div はそのコンテンツの幅である必要があるため、1 番目の div が残りのスペースを占める必要があります。

これが私の試みです： http://jsfiddle.net/jamesbrighton/N2prR/2/

#other の背景が #button の後ろに伸びていることを除いて、その動作。私の実際のサイト #other にも背景画像が右側に設定されています。これは、背景色と画像を #button まで拡張するだけで、それを超えないようにする必要があることを意味します。ありがとう

4

2 に答える 2

1

すべての両方のdivの1番目はフロートする必要があります。（そうでない場合、それらは異なる「レイヤー」に存在し、オーバーラップします）

自動幅のことに関しては、htmlだけでは簡単にできるとは思いません。私の経験では、divを使用して幅/高さを設定して作業する方が常に優れています。

必要に応じて、2 tdテーブルを使用できます（1つは幅を100％に設定し、もう1つは幅を設定します-例：200px）

幸運を

于 2012-05-22T11:53:24.020 に答える
1 
<style>
#other {
    background-color: blue;
width: 40%;
}
#button {
   background-color: gold;
   float: right;
   border-radius: 10px;
   width: 60%; 
}
.clear{
   clear: both;
}


<div id="親">
 <div id="ボタン">
    提出する 提出する 提出する 提出する 提出する 提出する 提出する 提出する
 </div>
 <div id="その他">
   その他のコンテンツ
 </div>
<div class="clear"></div>
</div>

最初の <div> にパーセンテージで固定する必要があります。2 番目のテキストは自動的に折り返されます。

于 2012-05-22T12:12:41.617 に答える