HTML div自动宽度

我有一个容器div和3个内部div，将它们放在一行中。边divs有固定的宽度，我想中间div的自动宽度。这是我的代码：HTML 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>

...但中间div不占用任何空间。

注意：我不希望容器div具有固定或百分比大小。

什么是解决方案？

来源

2013-03-17 JalalJaberi

究竟是什么问题？ – caramba 2013-03-17 12:44:43

即使宽度为100％，中间div也不占用两个div div之间的空闲空间。 – JalalJaberi 2013-03-17 13:29:40

（如果你愿意的话，请加上@和我的名字，这样我就可以更快地看到它）尝试关闭旁边的div，就像Christoffer说的那样！也是身高：25p;将永远不会工作。你必须赖特身高：25px; – caramba 2013-03-17 13:52:57

您没有关闭容器中的第一个和最后一个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>

来源

2013-03-17 11:28:40

我不想让中间格改变他的宽度与它的内容。它取决于容器的宽度。换句话说，中间div必须在容器div内填充空闲空间。 – JalalJaberi 2013-03-17 11:39:32

没有“自由空间”，因为你没有声明容器的宽度。如果你这样做（即100％），你可以让中间的容器填满这个空间。像这样：http://jsfiddle.net/qC5bk/3/ – 2013-03-17 11:55:15

我将容器的宽度值更改为100％，但中间div不占用可用空间:( – JalalJaberi 2013-03-17 13:28:34

我已经遇到同样的问题之前。我花了很多时间玩了，幸运的是，这是一个简单的解决办法：

<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>

希望有所帮助。

来源

2015-09-20 20:20:17

HTML div自动宽度

回答

相关问题