HTML div 自动宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15460146/
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
HTML div auto width
提问by JalalJaberi
I have a container div and 3 inner divs that places them all in one row. The side divs have fixed width and I want auto width for the middle div. This is my code:
我有一个容器 div 和 3 个内部 div，将它们全部放在一行中。侧面 div 具有固定宽度，我想要中间 div 的自动宽度。这是我的代码：
<div style="width: auto; height: 25px; position: relative; float: right;">
<div style="width: 25px; height:25p; float: right; position: relative; display:inline-block;">
<div style="width: auto; height: 25px; position: relative; float: right; display:inline-block;"></div>
<div style="width: 25px; height:25p; float: right; position: relative; display:inline-block;">
</div>
...but middle div doesn't take any space.
...但中间 div 不占用任何空间。
note: I don't want the container div to have fixed or percentage size.
注意：我不希望容器 div 具有固定或百分比大小。
What is the solution?
解决办法是什么？
采纳答案by Christoffer Helgelin Hald
You are not closing off the first and last div within the container. You need that. I made a jsFiddle, I think it is what you need. Here is the code:
您没有关闭容器内的第一个和最后一个 div。你需要那个。我做了一个jsFiddle，我认为这是你需要的。这是代码：
<style>
div {
width: auto;
height: 25px;
position: relative;
float: right;
}
div div {
float: left;
display:inline-block;
}
div div:first-child {
float: left;
width: 25px;
}
div div:last-child {
width: 25px;
float: right;
}
</style>
<div>
<div>1</div>
<div>This is the second and middle div.</div>
<div>3</div>
</div>
回答by Luis Vidal
I've run into the same issue before. I spent a lot of time playing around, and luckily it was a simple fix:
我以前遇到过同样的问题。我花了很多时间玩，幸运的是这是一个简单的修复：
<style>
div1{
float: left;
width: 200px; /* ...Or whatever fixed width you want */
}
div2{
overflow: hidden; /* This will automatically set this div's width to the remainder */
}
</style>
Hope that helps.
希望有帮助。
