将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宽度设置为浮动内容

回答

相关问题