これはhtml CSSで明白に可能かどうかわかりません。3 div、1つの固定幅
1行に3つのdivがあります 2番目のdivは200pxの幅を占有し、最初の&は最後のdivを占有する必要があります。
http://jsfiddle.net/Garav/gk9t3/
残りの二つのdivはフィドルに100pxに固定されています。画面の残りの部分を両側に均等に塗りつぶして、2番目のdivが常に中央に残るようにする方法はありますか?
注:親divの幅は固定されていません。
これはhtml CSSで明白に可能かどうかわかりません。3 div、1つの固定幅
1行に3つのdivがあります 2番目のdivは200pxの幅を占有し、最初の&は最後のdivを占有する必要があります。
http://jsfiddle.net/Garav/gk9t3/
残りの二つのdivはフィドルに100pxに固定されています。画面の残りの部分を両側に均等に塗りつぶして、2番目のdivが常に中央に残るようにする方法はありますか?
注:親divの幅は固定されていません。
マージンを使用してください:0 auto;マージンのdivの必要はありません:http://jsfiddle.net/gk9t3/3/は
私は3つのdivsが必要です..残りの2つは、背景の繰り返しイメージを持っています.. –
あなたは親のdivに背景画像を追加することができます。 – Paul
ページには背景があり、中央の画像には透明な部分があると仮定しているので、中心部分の透明部分の下に「残っている」バックグラウンドが表示されないようにすることは明らかです。 –
私は中間のdivを別のdivの中に追加し、中央に配置しました。これが要件に合っているかどうかを確認してください:http://jsfiddle.net/gk9t3/1/
200pxは必ずしも20%である必要はありません。abtモバイルデバイスと考えてください –
CSS部分では、画像のプレースホルダーに希望の幅を設定できます。それは200px、または20%、またはあなたが欲しいものどれくらいでしょうか:) – gabitzish
私はモバイル、パッド、デスクトップのために個別に設定したくないものを –
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>
クールなソリューションbro ..今私は-veマージンとテーブルのプロパティの間で体重を測る必要があります –
コンテンツ用のサイドバーを使用する場合に更新されました。 – iambriansreed
あなたが何かを含むようにマージンにdivをしたいですか、単に埋めるために空のスペース、中央のものはセンタリングされます。中間divが100%幅の別のdiv内にあり、中央に配置されていればOKでしょうか? – gabitzish
中央のものはセンタリングされ、残りの2つのdivは基本的に残りのスペースを占める背景のリピート画像を持ちます –
ok。私は解決策を投稿します。それを確認してください – gabitzish