web-dev-qa-db-ja.com

CSSレイアウト-動的幅DIV

かなり一般的なレイアウトの問題があり、これまでテーブルを使用して解決してきましたが、CSSでそれを実現するためのアドバイスをお願いします。 「コンテナ」を構成する3つの画像があります。通常、左と右の画像はタグを使用して表示されるだけで、中央の画像は「背景画像」として表示され、コンテンツがその上に表示されるため、コンテンツはコンテナ内にあるように見えます。 /これを何百万回も使用：

<table width="100" cellpadding="0"><tr>
<td width="50"><img src="myleftimage" /></td>
<td style="background: url('mymiddleimage');">Content goes here...</td>
<td width="50"><img src="myrightimage" /></td>
</tr></table>

これの良い点は、テーブルの幅が常にブラウザー（または親）の幅であり、コンテンツが動的にサイズ調整されて左/右の画像間の残りのスペースを占める中央の列であるということです。

私がしたいのは、CSSを使用して、できるだけハードコードされた情報を使用して、これを再作成することです。だからこのようなもの：

<div style="float:left; width:100%">
  <div style="width: 50px;float:left;"><img src="myleftimage" /></div>
  <div style="background: url('mymiddleimage');float:left;width:???">Content goes here...</div>
  <div style="width: 50px;float:left;"><img src="myrightimage" /></div>
</div>

これは中央のdivでうまく受け入れられます-幅を設定するにはどうすればよいですか？現時点では、たとえば92％などのようにハードコードできますが、スペースを自動入力することを望んでいます。 CSSのみを使用して実行できますか？

csswidth
17
Todd Davis

試してみる

<div style="width:100%;">
    <div style="width:50px; float: left;"><img src="myleftimage" /></div>
    <div style="width:50px; float: right;"><img src="myrightimage" /></div>
    <div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
</div>

または

<div style="width:100%; border:2px solid #dadada;">
    <div style="width:50px; float: left;"><img src="myleftimage" /></div>
    <div style="width:50px; float: right;"><img src="myrightimage" /></div>
    <div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
<div style="clear:both"></div>    
</div>
21
wow

これはあなたが望むことをします。幅が50ピクセルの固定された側面、およびコンテンツが残りの領域を埋めます。

<div style="width:100%;">
    <div style="width: 50px; float: left;">Left Side</div>
    <div style="width: 50px; float: right;">Right Side</div>
    <div style="margin-left: 50px; margin-right: 50px;">Content Goes Here</div>
</div>
9
Aziz

または、2つの「サイド」画像の幅がわかっていて、フロートを処理したくない場合：

<div class="container">
    <div class="left-panel"><img src="myleftimage" /></div>
    <div class="center-panel">Content goes here...</div>
    <div class="right-panel"><img src="myrightimage" /></div>
</div>

CSS：

.container {
    position:relative;
    padding-left:50px;
    padding-right:50px;
}

.container .left-panel {
    width: 50px;
    position:absolute;
    left:0px;
    top:0px;
}

.container .right-panel {
    width: 50px;
    position:absolute;
    right:0px;
    top:0px;
}

.container .center-panel {
    background: url('mymiddleimage');
}

ノート：

親divのPosition：relativeは、絶対的に配置された子をそのノードに対して相対的に配置するために使用されます。

5
AaronSieb

モバイルデバイスのサポートで動的な幅を作る

http://www.codeography.com/2011/06/14/dynamic-fixed-width-layout-with-css.html

0
alex