17

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

<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だけでできますか？

4

4 に答える 4

22

試す

<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>
于 2009-08-31T20:54:22.813 に答える
9

これはあなたが望むことをします。幅 50px の固定辺で、コンテンツが残りの領域を埋めます。

<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>
于 2009-08-31T19:45:17.337 に答える
5

または、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 は、絶対配置された子をそのノードに対して相対的に配置するために使用されます。

于 2009-08-31T19:45:35.777 に答える
0

モバイルデバイスのサポートでダイナミックな幅を作る

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

于 2014-01-23T11:42:16.337 に答える