Html 右侧固定宽度 div，左侧填充剩余宽度 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8094787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fixed width div on right, fill remaining width div on left
提问by Thomas
Im searching for a way to have 2 divs as columns where div on right has a fixed width and div on left fill remaining space.
我正在寻找一种方法，将 2 个 div 作为列，其中右侧的 div 具有固定宽度，左侧的 div 填充剩余空间。
Does anyone happen to know if this can be done?
有谁碰巧知道这是否可以做到？
My attempt (renders block2 underneath block1):
我的尝试（在 block1 下渲染 block2）：
<style>
.block1 {
width: auto;
height: 200px;
background-color: green;
}
.block2 {
float: right;
height: 200px;
width: 200px;
background-color: red;
}
</style>
<div class="block1">test1</div>
<div class="block2">test2</div>
回答by sandeep
You can do it like this:
你可以这样做：
HTML:
HTML：
<div class="right">right</div>
<div class="left">left</div>
CSS:
CSS：
.left{
background:red;
}
.right{
float:right;
width:200px;
background:green
}
Check this live example http://jsfiddle.net/QHTeS/2/
检查这个现场示例http://jsfiddle.net/QHTeS/2/
回答by Kyle
Float Bothof the elements left:
Float两个元素都离开了：
<style>
.block1 {
width: auto;
height: 200px;
float: left;
background-color: green;
}
.block2 {
float: left;
height: 200px;
width: 200px;
background-color: red;
}
</style>
<div class="block1">test1</div>
<div class="block2">test2</div>
You should wrap them in a container as well to prevent messing up the rest of your layout. :)
您还应该将它们包装在一个容器中，以防止弄乱布局的其余部分。:)
That was wrong!
那是错误的！
Use display: table;on parent and display: table-cell;on children:
display: table;在父母和display: table-cell;孩子身上使用：
<div id="wrapper">
<div class="block1">test1</div>
<div class="block2">test2</div>
</div>
#wrapper
{
display: table;
width: 100%;
}
.block1 {
width: auto;
height: 200px;
display: table-cell;
background-color: green;
}
.block2 {
display: table-cell;
height: 200px;
width: 200px;
background-color: red;
}
回答by daGUY
Start out with a container <div>(#container) that holds both the left and right <div>s. Float one <div>to the right and give it a specific width (320px in my example). Then give the other <div>an absolute position starting at the absolute left (0px) and ending at the left edge of the <div>on the right (320px).
从包含left 和 right s的容器<div>( #container)开始<div>。<div>向右浮动一个并为其指定特定宽度（在我的示例中为 320px）。然后给另一个<div>绝对位置，从绝对左侧 (0px) 开始，<div>到右侧 (320px)的左边缘结束。
If you adjust the width of #container, the right <div>will remain fixed at 320px while the left <div>will expand to fill whatever the remaining area is.
如果您调整 的宽度#container，则右侧<div>将保持固定在 320 像素，而左侧<div>将扩展以填充剩余区域。
回答by islegmar
This is my solution without floats. The only caveat is that I need to use a wrapper. So, if the desired HTML is
这是我没有浮动的解决方案。唯一的警告是我需要使用包装器。因此，如果所需的 HTML 是
parent (has a border, margin, padding,...)
left (fixed width)
right (variable width, fill the entire space)
I must rewrite it as
我必须把它改写为
parent (has a border, margin, padding,...)
wrapper (has no styling)
left (fixed width)
right (variable eidthm, fill the entire space)
My HTML is
我的 HTML 是
<div style="border:1px solid black; background:red; margin:10px; padding:10px;" >
<div style="">
<div style="display:table-cell; padding:10px; min-width:100px; max-width:100px;background:green;">Left</div>
<div style="display:table-cell; padding:10px; width:100%; background:yellow;">Main content</div>
</div>
</div>
The main points here are:
这里的要点是：
- No use display:tablebecause then we can not set the border
- The use of min-width, max-width
- The use of width:100%
- 没有使用 display:table因为那样我们就不能设置边框
- min-width、max-width的使用
- 使用宽度：100%
