3

中央の div の両側を別の div またはスパンで塗りつぶしたいと考えています。

このフィドルに示すように、マージを使用してdivを中央に配置しています。

HTML

<div id='A>
  <div id='Ad'>
  </div>
</div>

CSS

#A{
  z-index: 3000;
  position: fixed;
  width: 100%;
  height:  40px;
  background: rgba(0,0,0,0.05);
}

/*
div or span to the left
*/

/*
centered div
*/
#Ad{
  z-index: 3000;
  width:  400px;
  height:  40px;
  margin-left:  auto;
  margin-right:  auto;
  border-left: solid 1px #ff0000;
  border-right: solid 1px #ff0000;
}

/*
div or span to the right
*/

左側の残りのスペースを常に占有する div と、右側の残りのスペースを占有する別の div を作成するにはどうすればよいですか。

説明:

中央の列は一定の幅である必要があります。左と右の列は、ウィンドウ サイズによって異なります。

4

4 に答える 4

3

これはあなたが望むものを達成するでしょう - 残りのスペースを埋める左と右の列を持つ固定幅の中央のdivを持つことができます:

HTML:

<div id="A">
    <div id="Ad">Centre</div>
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>

CSS:

#A {
    z-index: 3000;
    position: fixed;
    width: 100%;
    height: 400px;
    background: rgba(0, 0, 0, 0.05);
}
/*
centered div
*/
 #Ad {
    z-index: 3000;
    width: 400px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    border-left: solid 1px #ff0000;
    border-right: solid 1px #ff0000;
}
#left, #right {
    position:absolute;
    left:0;
    top:0;
    right:50%;
    margin-right:200px;
    background:#F00;
    height: 400px;
}
#right {
    left:50%;
    right:0;
    margin-left:200px;
    margin-right:0;
}

重要なのは、左右の余白が中央の列の幅全体の半分であることです。境界線やパディングを考慮して調整してください。

作業例: http://jsfiddle.net/2AztF/

于 2013-05-13T16:10:26.413 に答える
1

3 つの div を作成します。

<div id="A"></div>
<div id="B"></div>
<div id="C"></div>
<div style="clear:both"></div>

CSS:

 #A,#B,#C{
    float:left;
    width:10%;
  } 
  #B{
    width:80%;
  }

ここで、B はメイン div です。float プロパティを使用する場合は、クリアすることをお勧めします。

于 2013-05-13T16:17:22.910 に答える