我有2个div:一个在左边，一个在右边。左边的宽度是固定的，我想用右边的填充剩余的空间。
#搜索{ 宽度:160 px; 高度:25 px; 浮:左; background - color: # ffffff; ｝ #{导航 宽度:780 px; 浮:左; background - color: # A53030; ｝ < div id = "搜索" > < / div >文本 < div id = "导航" > < / div >导航
这似乎达到了你想要的效果。
#{离开 浮:左; 宽度:180 px; background - color: # ff0000; ｝ #{正确 宽度:100%; background - color: # 00 ff00; ｝ < div > < div id = "左" > 左 < / div > < div id = "正确" > 正确的 < / div > < / div >
解决方案来自display属性。
基本上你需要让两个div像表格单元一样。所以不是使用float:left，你必须在两个div上使用display:table-cell，对于动态宽度div，你需要设置width:auto;也。这两个div都应该放在一个100%宽度的容器中，并使用display:table属性。
下面是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属性，否则空间将不会被填充。
我希望这能解决你的问题。 如果你愿意，你可以在我的博客上阅读关于这一点的完整文章。
我在Boushley的答案中发现的问题是，如果右列比左列长，它就会围绕着左列并继续填充整个空间。这不是我想要的行为。在搜索了许多“解决方案”后，我找到了一个教程(现在链接死了)，如何创建三列页面。
作者提供了三种不同的方法，一种是固定宽度，一种是三个可变列，一种是固定外列，中间可变宽。比我发现的其他例子更加优雅和有效。显著提高了我对CSS布局的理解。
基本上，在上面的简单例子中，将第一列向左浮动，并给它一个固定的宽度。然后给右边的一列留出比第一列稍宽的左距。就是这样。完成了。Ala Boushley的代码:
下面是Stack Snippets & jsFiddle中的一个演示
#{离开 浮:左; 宽度:180 px; ｝ #{正确 margin-left: 180 px; ｝ /*只是为了突出div，例如*/ #left {background-color:粉色;｝ #right {background-color:浅绿色;} <div id="left"> left </div> . <div id="right"> right </div> .
在鲍什利的例子中，左边一列表示右边另一列。只要左列结束，右列就开始再次填充整个空间。在这里，右列只是进一步对齐到页面中，而左列占据了它的大空白。不需要流交互。
Boushley的答案似乎是使用浮动来安排这一过程的最佳方法。然而，它也不是没有问题。展开元素中的嵌套浮动将不可用;它会破坏页面。
当涉及到扩展元素时，所显示的方法基本上是“伪造”的——它实际上并不是浮动的，它只是使用其边缘来处理固定宽度的浮动元素。
问题就在于:展开的元素不是浮动的。如果你尝试在展开元素中有任何嵌套的浮动，这些“嵌套的”浮动项根本就不是嵌套的;当你试图坚持明确:两者;在“嵌套”浮动项下，最终也会清除顶级浮动。
然后，为了使用Boushley的解决方案，我想添加一个div，如下所示: .fakeFloat ｛ 高度:100%; 宽度:100%; 浮:左; ｝ 并将其直接放置在展开的div中;所有展开的div的内容都应该在这个fakfloat元素中。
出于这个原因，我建议在这种特定情况下使用表。浮动元素实际上并不是为执行您想要的展开而设计的，而使用表的解决方案则是微不足道的。有一种说法是，浮动更适合布局，而不是表格。但无论如何，你并没有在这里使用float，你是在假装它——在我看来，这在某种程度上违背了这种特定情况下风格论证的目的。
我在尝试布局一些jqueryUI控件时遇到了同样的问题。尽管现在普遍的理念是“使用DIV而不是TABLE”，但我发现在我的案例中使用TABLE效果更好。特别是，如果你需要在两个元素之间进行直接的对齐(例如，垂直居中，水平居中等)，TABLE提供的选项可以提供简单直观的控制。
以下是我的解决方案:
<html>
<head>
<title>Sample solution for fixed left, variable right layout</title>
<style type="text/css">
#controls {
width: 100%;
}
#RightSide {
background-color:green;
}
</style>
</head>
<body>
<div id="controls">
<table border="0" cellspacing="2" cellpadding="0">
<TR>
<TD>
<button>
FixedWidth
</button>
</TD>
<TD width="99%" ALIGN="CENTER">
<div id="RightSide">Right</div>
</TD>
</TR>
</table>
</div>
</body>
</html>
@Boushley的回答是最接近的，但是有一个问题没有解决，但已经指出了。右边的div取浏览器的整个宽度;内容采用预期的宽度。为了更好地看待这个问题:
<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>
http://jsfiddle.net/79hpS/
内容在正确的位置(在Firefox中)，但是宽度不正确。当子元素开始继承width时(例如，width: 100%的表)，它们被赋予的宽度等于浏览器的宽度，导致它们溢出页面的右侧并创建一个水平滚动条(在Firefox中)或不浮动并向下推(在chrome中)。
您可以通过向右列添加overflow: hidden来轻松解决这个问题。这将为内容和div提供正确的宽度。此外，表格将接收正确的宽度，并填充可用的剩余宽度。
我尝试了上面的一些其他解决方案，它们在某些边缘情况下并不完全有效，而且太复杂了，无法进行修复。这很有效，也很简单。
如果有任何问题或顾虑，请尽管提出来。
我尝试了上面的解决方案，左边是液体，右边是固定的，但它们都不起作用(我知道这个问题是相反的，但我认为这是相关的)。以下是行之有效的方法:
.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}
.right {float:right; width:150px;}
<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>
／* * css * /
#search {
position: absolute;
width: 100px;
}
.right-wrapper {
display: table;
width: 100%;
padding-left:100px;
}
.right-wrapper #navigation {
display: table-cell;
background-color: #A53030;
}
／* * html * /
<div id="search"></div>
<div class="right-wrapper">
<div id="navigation"></div>
</div>
由于这是一个相当流行的问题，我倾向于分享一个使用BFC的很好的解决方案。 代码样例如下。
.left {
float: left;
width: 100px;
}
.right {
overflow: auto;
}
在这种情况下，overflow: auto触发上下文行为，并使右元素仅扩展到可用的剩余宽度，如果.left消失，它将自然扩展到全宽度。对于许多UI布局来说，这是一个非常有用和干净的技巧，但一开始可能很难理解“为什么它有效”。
现在，您应该使用flexbox方法(可以适用于所有带有浏览器前缀的浏览器)。
.container {
display: flex;
}
.left {
width: 180px;
}
.right {
flex-grow: 1;
}
更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
我也遇到过类似的问题，我在这里找到了解决方案: https://stackoverflow.com/a/16909141/3934886
解决方案是一个固定的中心div和液体边列。
.center{
background:#ddd;
width: 500px;
float:left;
}
.left{
background:#999;
width: calc(50% - 250px);
float:left;
}
.right{
background:#999;
width: calc(50% - 250px);
float:right;
}
如果你想要一个固定的左列，只需相应地改变公式。
我有一个非常简单的解决办法! / / HTML
<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
/ / CSS
#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}
链接:http://jsfiddle.net/MHeqG/
我也遇到过类似的问题，并想出了以下行之有效的方法
CSS:
.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}
HTML:
<div class=top>top </div>
<div>
<div class="left">left </div>
<div class="right">
<div class="content">right </div>
</div>
</div>
这个方法不会在窗口收缩时自动换行，但会自动展开“内容”区域。它将为站点菜单(左)保持一个静态宽度。
以及自动展开内容框和左侧垂直框(站点菜单)的演示:
https://jsfiddle.net/tidan/332a6qte/
如果你不需要兼容某些浏览器的旧版本(例如IE 10 8或更低版本)，你可以使用calc() CSS函数:
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
float: left;
width: calc(100% - 180px);
background-color:#00FF00;
}
尝试添加相对位置，删除右边的宽度和浮动属性，然后添加0值的左和右属性。
此外，您还可以添加左距规则，其值基于左元素的宽度(如果您需要在两者之间留出空间，则要加上一些像素)来保持其位置。
这个例子对我来说很有用:
#search {
width: 160px;
height: 25px;
float: left;
background-color: #FFF;
}
#navigation {
display: block;
position: relative;
left: 0;
right: 0;
margin: 0 0 0 166px;
background-color: #A53030;
}
这里有一个小的解决方案，它可以防止右列落在左列下面。更换宽度:100%;带溢出:隐藏;如果有人不知道的话，这是个棘手的解决方案。
<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/
[编辑]还有一个三列布局的例子: http://jsfiddle.net/MHeqG/3148/
.container { 宽度:100%; 显示:表; vertical-align:中间; ｝ .left { 宽度:100%; 显示:表格单元; text-align:中心; ｝ 铃声{ 宽度:40像素; 高度:40像素; 显示:表格单元; 浮:正确; ｝ < div class = "容器" > 左< div class = "左" > < / div > < div class = "对" >对< / div > < / div
试试这个。这对我很管用。
我想知道为什么没有人把position: absolute和position: relative放在一起使用
所以，另一个解决方案是:
HTML
<header>
<div id="left"><input type="text"></div>
<div id="right">Menu1 Menu2 Menu3</div>
</header>
CSS
header { position: relative; }
#left {
width: 160px;
height: 25px;
}
#right {
position: absolute;
top: 0px;
left: 160px;
right: 0px;
height: 25px;
}
Jsfiddle例子
如果您试图填充flexbox中2项之间的剩余空间，请将以下类添加到您想要分离的2项之间的空div:
.fill {
// This fills the remaining space, by using flexbox.
flex: 1 1 auto;
}
使用显示: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>
我已经在这个问题上工作了两天，有一个解决方案，可能适用于你和任何人试图使一个响应固定宽度左侧，并有右侧填补屏幕的其余部分，而不环绕左侧。我认为这样做的目的是使页面在浏览器和移动设备上都能响应。
这里是密码
// Fix the width of the right side to cover the screen when resized $thePageRefreshed = true; // The delay time below is needed to insure that the resize happens after the window resize event fires // In addition the show() helps. Without this delay the right div may go off screen when browser is refreshed setTimeout(function(){ fixRightSideWidth(); $('.right_content_container').show(600); }, 50); // Capture the window resize event (only fires when you resize the browser). $( window ).resize(function() { fixRightSideWidth(); }); function fixRightSideWidth(){ $blockWrap = 300; // Point at which you allow the right div to drop below the top div $normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){ $('.right_content_container').width( $normalRightResize ); $('.right_content_container').css("padding-left","0px"); /* Begin test lines these can be deleted */ $rightrightPosition = $('.right_content_container').css("right"); $rightleftPosition = $('.right_content_container').css("left"); $rightwidthPosition = $('.right_content_container').css("width"); $(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition); /* End test lines these can be deleted */ } else{ if( $('.right_content_container').width() > 300 ){ $('.right_content_container').width(300); } /* Begin test lines these can be deleted */ $rightrightPosition = $('.right_content_container').css("right"); $rightleftPosition = $('.right_content_container').css("left"); $rightwidthPosition = $('.right_content_container').css("width"); $(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition); /* End test lines these can be deleted */ } if( $thePageRefreshed == true ){ $thePageRefreshed = false; } } /* NOTE: The html and body settings are needed for full functionality and they are ignored by jsfiddle so create this exapmle on your web site */ html { min-width: 310px; background: #333; min-height:100vh; } body{ background: #333; background-color: #333; color: white; min-height:100vh; } .top_title{ background-color: blue; text-align: center; } .bottom_content{ border: 0px; height: 100%; } .left_right_container * { position: relative; margin: 0px; padding: 0px; background: #333 !important; background-color: #333 !important; display:inline-block; text-shadow: none; text-transform: none; letter-spacing: normal; font-size: 14px; font-weight: 400; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; border-radius: 0; box-sizing: content-box; transition: none; } .left_navigator_item{ display:inline-block; margin-right: 5px; margin-bottom: 0px !important; width: 100%; min-height: 20px !important; text-align:center !important; margin: 0px; padding-top: 3px; padding-bottom: 3px; vertical-align: top; } .left_navigator_items { float: left; width: 150px; } .right_content_container{ float: right; overflow: visible!important; width:95%; /* width don't matter jqoery overwrites on refresh */ display:none; right:0px; } .span_text{ background: #eee !important; background-color: #eee !important; color: black !important; padding: 5px; margin: 0px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="top_title">Test Title</div> <div class="bottom_content"> <div class="left_right_container"> <div class="left_navigator_items"> <div class="left_navigator_item">Dashboard</div> <div class="left_navigator_item">Calendar</div> <div class="left_navigator_item">Calendar Validator</div> <div class="left_navigator_item">Bulletin Board Slide Editor</div> <div class="left_navigator_item">Bulletin Board Slide Show (Live)</div> <div class="left_navigator_item">TV Guide</div> </div> <div class="right_content_container"> <div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi. Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut. Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor. Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus. In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div> </div> </div> </div>
这是我的小提琴，它可能对你有用，就像对我一样。 https://jsfiddle.net/Larry_Robertson/62LLjapm/
您可以使用网格CSS属性，是最清晰，干净和直观的方式结构您的盒子。
#{容器 显示:网格; Grid-template-columns: 100px auto; 颜色:白色; ｝ #{固定 背景:红色; grid-column: 1; ｝ 剩余# { 背景:绿色; grid-column: 2; ｝ < div id = "容器" > < div id = "固定" > < / div >固定 剩余< div id = "剩余" > < / div > < / div >
物品和容器的规则;
Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}
使用空白:nowrap;为最后一项的文本进行解构。
项目X% |项目Y% |项目Z%
总长度总是= 100%!
if
Item X=50%
Item Y=10%
Item z=20%
然后
项目X = 70%
项目X占主导地位(在表格CSS布局中，第一项占主导地位)!
试着max-content;用于在容器中传播div的div内部属性:
div[class="item"] {
...
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
...
}
最简单的解决方案是让左边div的宽度等于100% -右边div的宽度加上它们之间的任何边距。
<div class="cont">
<div class="search">
Big Logo Text
</div>
<nav>
<ul class="navbar">
<li><a href="#1">NavLink1</a></li>
<li><a href="#2">NavLink2</a></li>
<li><a href="#3">NavLink3</a></li>
<li><a href="#4">NavLink4</a></li>
<li><a href="#5">NavLink5</a></li>
</ul>
</nav>
</div>
.cont{
display: inline-grid;
grid-template-columns: 160px 10px calc(100% - 170px);
grid-template-rows: auto;
grid-template-areas: "search . navigation";
width: 100%;
height: auto;
text-align: center;
}
.search {
grid-area: search;
height: 90px;
background-color: #00FF00;
line-height: 80px;
font-size: 1.4rem;
font-weight: 600;
}
nav {
grid-area: navigation;
height: 90px;
background-color: #A53030;
}
.navbar{
display: flex;
height: 30px;
width: 100%;
padding: 0%;
list-style-type: none;
flex-flow: row wrap;
flex: 0 1 auto;
justify-content: space-between;
align-content: flex-start;
align-items: flex-start;
}
.navbar a{
outline: 0;
text-decoration: none;
}
https://codepen.io/tamjk/pen/dybqKBN
最简单的解决方法是使用保证金。这也将是响应!
<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>
如果有人需要相同的解决方案，但没有固定长度的左div:
如果你想让左边的div占据所有的空间，你可以删除固定大小的180px。参见下面的CSS:
#left {
float: left;
background-color: red;
}
#right {
background-color: yellow;
flex-grow: 1
}
参见这里的JSFiddle: JSFiddle -div-space
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上，我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?
