將div寬度設置爲浮動內容

我有一個帶有多個浮動元素的容器div。我正在嘗試使容器寬度適合內容。我現在有一個初步符合容器的內容的jsfiddle：將div寬度設置爲浮動內容

然而，只要在屏幕寬度變小，內容的div對同一行上顯示沒有空間，這種情況：

這是我的代碼：

.container { 
 

 
    border: 1px solid red; 
 

 
    display: table; 
 

 
} 
 

 
.content { 
 

 
    border: 1px solid blue; 
 

 
    width: 100px; 
 

 
    height: 100px; 
 

 
    float: left; 
 

 
}

<div class="container"> 
 
    <div class="content"></div> 
 
    <div class="content"></div> 
 
    <div class="content"></div> 
 
    <div style="clear:both"></div> 
 
</div>

應該發生的事情是，當第三個內容div轉到下一行時，容器div應該變小以適應內容。我如何使容器寬度適合所有情況下的內容？

編輯澄清：孩子divs行爲正確。這個問題只是關於改變容器的寬度。

來源

2016-06-18 user4493177

這是不可能的CSS ......這不是線框模型的工作方式。您需要使用媒體查詢或JavaScript。 –

您可以使用媒體查詢根據屏幕大小更改容器寬度。 .container正常需要width等於兒童width，並且每個孩子需要width: 102px（寬度+邊框左/右），.containerwidth =子寬+容器邊框;

當屏幕寬度小於.container寬度時，它將推動下面的最後一個元素。從這一點開始，您可以根據.container寬度設置媒體查詢。

https://jsfiddle.net/v5czL9he/2/

* { 
 
    margin:0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    border: 1px solid red; 
 
    display: table; 
 
} 
 

 
.content { 
 
    border: 1px solid blue; 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
} 
 

 
/* if screen width < .container width 
 
    decrease last element from fisrt row 
 
    decrease it's width from the container width 
 
*/ 
 
@media only screen and (max-width: 308px) { 
 
.container { 
 
    width: calc(306px - 102px); 
 
} 
 
} 
 

 
@media only screen and (max-width: 206px) { 
 
.container { 
 
    width: calc(204px - 102px); 
 
} 
 
}

<div class="container"> 
 
    <div class="content"></div> 
 
    <div class="content"></div> 
 
    <div class="content"></div> 
 
    <div style="clear:both"></div> 
 
</div>

來源

2016-06-18 14:32:26

.content div不應改變寬度。 – user4493177

@ user4493177請參閱編輯。 –

通過添加固定的寬度？（如果我理解你想要的東西）

width:305px;

來源

2016-06-18 14:32:30 Andrejs

固定寬度是不可能的。容器div應該有儘可能小的寬度，基於內部的div。 – user4493177

將div寬度設置爲浮動內容

回答

相關問題