ale*_*nco 402 html css width css3 responsive
我有2个div:一个在左侧,一个在我的页面右侧.左侧的那个有固定的宽度,我希望右侧的一个填充剩余的空间.
#search {
width: 160px;
height: 25px;
float: left;
background-color: #ffffff;
}
#navigation {
width: 780px;
float: left;
background-color: #A53030;
}<div id="search">Text</div>
<div id="navigation">Navigation</div>Han*_*ank 261
我在Boushley的回答中发现的问题是,如果右列比左侧更长,它只会环绕左侧并继续填充整个空间.这不是我想要的行为.在搜索了很多"解决方案"之后,我发现了这个关于创建三个列页面的精彩教程.
作者提供了三种不同的方式,一种固定宽度,一种具有三个可变列,一种具有固定外柱和可变宽度中间.比我发现的其他例子更优雅和有效.显着提高了我对CSS布局的理解.
基本上,在上面的简单情况下,向左浮动第一列并给它一个固定的宽度.然后在右边的列中给出一个比第一列略宽的左边距.而已.完成.Ala Boushley的代码:
这是Stack Snippets&jsFiddle的演示
#left {
float: left;
width: 180px;
}
#right {
margin-left: 180px;
}
/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}<div id="left"> left </div>
<div id="right"> right </div>在Boushley的例子中,左栏保持右侧的另一列.一旦左列结束,右侧开始再次填充整个空间.右边的列只是在页面中进一步对齐,左列占据了它的巨大余量.无需流量交互.
Mih*_*tiu 125
解决方案来自display属性.
基本上你需要使两个div像表格单元格一样.因此,不必使用float:left,您必须display:table-cell在两个div 上使用,并且还需要设置动态宽度div width:auto;.应将两个div放入具有该display:table属性的100%宽度容器中.
这是css:
.container {display:table;width:100%}
#search {
width: 160px;
height: 25px;
display:table-cell;
background-color: #FFF;
}
#navigation {
width: auto;
display:table-cell;
/*background-color: url('../images/transparent.png') ;*/
background-color: #A53030;
}
*html #navigation {float:left;}
和HTML:
<div class="container">
<div id="search"></div>
<div id="navigation"></div>
</div>
重要信息:对于Internet Explorer,您需要在动态宽度div上指定float属性,否则不会填充空格.
我希望这能解决你的问题.如果你愿意,你可以在我的博客上阅读我写的关于此的完整文章.
Jor*_*dan 115
现在,您应该使用该flexbox方法(可能适用于具有浏览器前缀的所有浏览器).
.container {
display: flex;
}
.left {
width: 180px;
}
.right {
flex-grow: 1;
}
更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
mys*_*dat 102
由于这是一个相当受欢迎的问题,我倾向于使用BFC分享一个很好的解决方案.
下面的示例Codepen 这里.
.left {
float: left;
width: 100px;
}
.right {
overflow: auto;
}
在这种情况下,overflow: auto触发上下文行为并使正确的元素仅扩展到可用的剩余宽度,如果.left消失,它将自然地扩展到全宽.对于许多UI布局来说,这是一个非常有用和干净的技巧,但最初可能很难理解"它为何起作用".
Bou*_*ley 65
这似乎可以实现您的目标.
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
width: 100%;
background-color:#00FF00;
}<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>Mar*_* B. 23
如果您不需要与某些浏览器的旧版本(例如IE 10 8或更低版本)兼容,则可以使用calc()CSS功能:
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
float: left;
width: calc(100% - 180px);
background-color:#00FF00;
}
小智 15
@ Boushley的答案是最接近的,但是有一个问题没有得到解决.的右格取浏览器的整个宽度; 内容采用预期的宽度.要更好地看到这个问题:
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
body {
height: 100%;
}
#left {
opacity: 0;
height: inherit;
float: left;
width: 180px;
background: green;
}
#right {
height: inherit;
background: orange;
}
table {
width: 100%;
background: red;
}
</style>
</head>
<body>
<div id="left">
<p>Left</p>
</div>
<div id="right">
<table><tr><td>Hello, World!</td></tr></table>
</div>
</body>
</html>
内容位于正确的位置(在Firefox中),但宽度不正确.当子元素开始继承宽度(例如表格width: 100%)时,它们的宽度等于浏览器的宽度,导致它们从页面右侧溢出并创建水平滚动条(在Firefox中)或不浮动并向下推(在铬).
您可以通过添加到右栏轻松解决此问题overflow: hidden.这为内容和div提供了正确的宽度.此外,表格将获得正确的宽度并填充剩余的可用宽度.
我尝试了上面的其他一些解决方案,它们没有完全适用于某些边缘情况,并且太复杂而无法修复它们.这很有效,而且很简单.
如果有任何问题或疑虑,请随意提出.
Dar*_*ski 12
以下是对已接受解决方案的一点修复,可防止右列落入左列.如果有人不知道的话,width: 100%;用overflow: hidden;一个棘手的解决方案取而代之.
<html>
<head>
<title>This is My Page's Title</title>
<style type="text/css">
#left {
float: left;
width: 180px;
background-color: #ff0000;
}
#right {
overflow: hidden;
background-color: #00FF00;
}
</style>
</head>
<body>
<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
http://jsfiddle.net/MHeqG/2600/
[edit]同时查看三栏布局的示例:http: //jsfiddle.net/MHeqG/3148/
如果您尝试填充 flexbox 中 2 个项目之间的剩余空间，请将以下类添加到您要分隔的 2 个项目之间的空 div 中：
.fill {
// This fills the remaining space, by using flexbox.
flex: 1 1 auto;
}
使用display:flex
<div style="width:500px; display:flex">
<div style="width:150px; height:30px; background:red">fixed width</div>
<div style="width:100%; height:30px; background:green">remaining</div>
</div>