2012-04-24 57 views
1

これはhtml CSSで明白に可能かどうかわかりません。3 div、1つの固定幅

1行に3つのdivがあります 2番目のdivは200pxの幅を占有し、最初の&は最後のdivを占有する必要があります。

http://jsfiddle.net/Garav/gk9t3/

残りの二つのdivはフィドルに100pxに固定されています。画面の残りの部分を両側に均等に塗りつぶして、2番目のdivが常に中央に残るようにする方法はありますか?

注:親divの幅は固定されていません。

+0

あなたが何かを含むようにマージンにdivをしたいですか、単に埋めるために空のスペース、中央のものはセンタリングされます。中間divが100%幅の別のdiv内にあり、中央に配置されていればOKでしょうか? – gabitzish

+0

中央のものはセンタリングされ、残りの2つのdivは基本的に残りのスペースを占める背景のリピート画像を持ちます –

+0

ok。私は解決策を投稿します。それを確認してください – gabitzish

答えて

1

マージンを使用してください:0 auto;マージンのdivの必要はありません:http://jsfiddle.net/gk9t3/3/

+0

私は3つのdivsが必要です..残りの2つは、背景の繰り返しイメージを持っています.. –

+0

あなたは親のdivに背景画像を追加することができます。 – Paul

+0

ページには背景があり、中央の画像には透明な部分があると仮定しているので、中心部分の透明部分の下に「残っている」バックグラウンドが表示されないようにすることは明らかです。 –

0

私は中間のdivを別のdivの中に追加し、中央に配置しました。これが要件に合っているかどうかを確認してください:http://jsfiddle.net/gk9t3/1/

+0

200pxは必ずしも20%である必要はありません。abtモバイルデバイスと考えてください –

+0

CSS部分では、画像のプレースホルダーに希望の幅を設定できます。それは200px、または20%、またはあなたが欲しいものどれくらいでしょうか:) – gabitzish

+0

私はモバイル、パッド、デスクトップのために個別に設定したくないものを –

3

証明:http://jsfiddle.net/5Br5A/

CSS

.image-placeholder{ 
    background: #0f0; 
    width: 200px; 
    height : 200px; 
    clear:none; 
    float: left; 
} 
.fill-remaining { 
    height:200px; 
    width:50%; 
    clear:none; 
} 
.fill-remaining.left { 
    background:#f00; 
    float: left; 
    margin-right:-100px; 
} 
.fill-remaining.left>div { 
    padding-right: 100px; 
} 
.fill-remaining.right { 
    background:#00f; 
    float: right; 
    margin-left:-100px; 
} 
.fill-remaining.right>div { 
    padding-left: 100px; 
}​ 

HTML

<div class="fill-remaining left"> 
</div> 
<div class="fill-remaining right"> 
</div> 
<div class="image-placeholder"> 
</div> 
+0

クールなソリューションbro ..今私は-veマージンとテーブルのプロパティの間で体重を測る必要があります –

+0

コンテンツ用のサイドバーを使用する場合に更新されました。 – iambriansreed

関連する問題