Question

纠正我，如果我错了，不是这应该并排显示所有三个div？仅显示假定的中间（现在浮动到最左侧）div（包含一些内容）。另一个根本没有显示。

谢谢！

编辑*：我关闭了第二个div，但似乎只要我从div中删除内容，它们就会停止显示。我在它们中放入了一个br，它们现在显示一个小尺寸的条纹，如何让它自主？（不需要br？

HTML：

<div id="borderleft"><br></div>
<div id="bordermiddle"><br></div>
<div id="borderright"><br></div>

CSS：

#borderleft {
background-color: rgba(220, 220, 200, 0.8);
height:23%;
width:13%;
float:left;
}
#bordermiddle {
text-align:center;
background-color: rgba(220, 220, 200, 0.4);
width:74%;
height:100%;
float:left;
margin:0 0 10% 0;
}
#borderright {
background-color: rgba(220, 220, 200, 0.8);
height:23%;
width:13%;
float:left;
}

Answer 1

你需要像这里关闭第二个<div>：

<div id="borderleft"></div>
<div id="bordermiddle"></div>   <!---------- Close this one ---------->
<div id="borderright"></div>

正在使用 DEMO

修改：

将此添加到您的css：html,body{width:100%; height:100%;margin:0;}

Answer 2

只要您的div的高度设置为百分比，当您删除内容时，它们将始终停止显示。

如果您希望它们在页面上显示没有任何内容，则必须以像素或ems设置其高度。

本

水平对齐3个分隔线，只有中间显示？

2 个答案: