3

我想在每一侧用另一个 div 或 span 填充居中 div 的两侧。

我正在使用边距使 div 居中，如this fiddle所示。

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。使用浮点属性时清除是个好习惯。

于 2013-05-13T16:17:22.910 回答
1

我只会<div>s在主容器中使用 3 个浮动

HTML：

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

CSS：

#A { overflow:auto }
#AdLeft { float:left; width:25%; }
#Ad { float:left; width:50%; }
#AdRight { float:left; width:25%; }

这是一个修改后的jsfiddle。

于 2013-05-13T16:04:02.827 回答
1

要填充 div 代码左右两侧的空间，请使用并确保这些边没有边距或填充。

float:right; 
float:left;

HTML：

<div class='container'> 
<div class='left'></div> 
<div class='center'></div>
<div class='right'></div> 
</div>

CSS：

.container { overflow: hidden; margin:0; padding:0; }
.right { float: right; width: 150px; }
.center{ float: right; width:50px; margin-right: 50px; }
.left{ float: left; width: 150px; }

.center 的 margin-right 将相应地填充空间。

于 2013-05-13T16:04:30.550 回答