卡在页眉的CSS宽度/浮动上
卡在页眉的CSS宽度/浮动上
提问于 2015-07-12 16:09:18
我有点卡在CSS的一个家庭项目，我正在做。目前，我正在处理一个标题，或‘顶部菜单栏’。在视口的每一侧都有一个或两个固定px维的按钮。这些L和R侧div都被设置为浮动L和R，并设置为display:block；
现在我想得到的是，“头-中心”-div将浮动在这些L和R之间的中心的同一条线上，并且它中的所有内容都应该是居中的。我最不想做的就是最大限度。中心div的宽度可能(动态)不大于视口宽度的剩余宽度减去用于L和R的宽度(因此一切都保持在相同的高度上)。
我怎样才能得到我想要的结果呢？
<header>
<div id="header-left"></div>
<div id="header-center"></div>
<div id="header-right"></div>
</header>
#header-left {
width: 160px;
height: 80px;
display: block;
float: left;
}
#header-center {
height: 80px;
display: block;
overflow: hidden;
}
#header-right {
width: 240px;
height: 80px;
display: block;
float: right;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2015-07-12 16:34:29
也许这能解决你的问题
header{
display: table;
width: 100%;
}
#header-left {
width: 160px;
height: 80px;
display: table-cell;
background: #f00;
}
#header-center {
height: 80px;
overflow: hidden;
display: table-cell;
background: #0f0;
}
#header-right {
width: 240px;
height: 80px;
display: table-cell;
background: #00f;
}<header>
<div id="header-left">Left</div>
<div id="header-center">Center</div>
<div id="header-right">Right</div>
</header>
Stack Overflow用户
发布于 2015-07-12 16:45:33
建议的答案：
<!Doctype html>
<style>
body{
margin:0;
width:100%;
}
#header-left,
#header-center,
#header-right{
float:left;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
#header-left,
#header-right{
width:10%;
background:rgb(255,0,0);
}
#header-center{
width:80%;
background:rgb(0,0,255);
}
</style>
<body>
<header>
<div id="header-left">Content</div>
<div id="header-center">Content</div>
<div id="header-right">Content</div>
</header>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31369819
复制相关文章
相似问题
腾讯云开发者
