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

【问题标题】：Aligning 3 dividers horozontally, only middle shows up?水平对齐 3 个分隔线，只显示中间？
【发布时间】：2014-09-30 17:45:40
【问题描述】：

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

谢谢！

编辑*：我关闭了第二个 div，但似乎一旦我从 div 中删除内容，它们就不再出现。我在它们里面放了一个 br，它们现在显示一个小的 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;
}

【问题讨论】：

错字。没有关闭一个
.
@Manfred Gibson 你设置了body 和html height:100% en width:100% 吗？检查我的编辑...在答案中检查我的DEMO，因为它没有同样的问题..

标签： html css css-float vertical-alignment divider

【解决方案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;}

【讨论】：

我添加了，现在全部搞砸了，哈哈，你能解释一下 html 宽度高度边距的作用吗？不过我已经把它设置在身上了。
嗯，width:100%; 说他可以使用所有的宽度空间，高度也一样。你可以留下margin:0; 这只会重置所有浏览器设置的边距。
不幸的是，html {height:100%} 似乎与美丽的背景大相径庭。它将背景保留为看似原始的分辨率，向下滚动时会出现空白区域。我的背景设置如下： background-image:(imagelink);背景尺寸：封面；背景重复：不重复；
要查看问题可能是什么，我们需要查看更多相关代码..因为我的答案是您给我们的代码的解决方案..也许是网站链接？
我制作了一个损坏的（100% 高度 html）版本project-smoothvillage.comeze.com/Project-Home-Broken.html 和一个未损坏的版本，高度设置为自动。 project-smoothvillage.comeze.com/Project-Home.html 按钮似乎不起作用，但不管它是一个糟糕的托管站点。

【解决方案2】：

只要您的 div 的高度以百分比设置，当您删除内容时，它们将始终不再出现。

如果您希望它们在没有任何内容的情况下显示在页面上，则必须以像素或 em 为单位设置它们的高度。

本

【讨论】：

但它会在其他分辨率上搞砸网站？