我有2个div:一个在左边，一个在右边。左边的宽度是固定的，我想用右边的填充剩余的空间。
#搜索{ 宽度:160 px; 高度:25 px; 浮:左; background - color: # ffffff; ｝ #{导航 宽度:780 px; 浮:左; background - color: # A53030; ｝ < div id = "搜索" > < / div >文本 < div id = "导航" > < / div >导航
当前回答
我在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> .
在鲍什利的例子中，左边一列表示右边另一列。只要左列结束，右列就开始再次填充整个空间。在这里，右列只是进一步对齐到页面中，而左列占据了它的大空白。不需要流交互。
其他回答
最简单的解决方案是让左边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
我有一个非常简单的解决办法! / / 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/
这似乎达到了你想要的效果。
#{离开 浮:左; 宽度:180 px; background - color: # ff0000; ｝ #{正确 宽度:100%; background - color: # 00 ff00; ｝ < div > < div id = "左" > 左 < / div > < div id = "正确" > 正确的 < / div > < / div >
这里有一个小的解决方案，它可以防止右列落在左列下面。更换宽度: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/
最简单的解决方法是使用保证金。这也将是响应!
<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>
