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自動寬度

回答

相關問題