Question

我有一个分配了div类box_1的框。

现在我想给这个类增加宽度，但也可以扩展它。

如果我只是尝试给它一个auto值，它只会扩展到屏幕的末尾。那不是我想要的。所以说我给它宽4英寸，但div内的内容需要更多的空间（动态内容），它需要扩展。关于我如何使它可扩展（只有当它需要扩展）并且还给它一个'默认宽度'的任何想法？

Answer 1

您可以使用CSS propety min-width。

你可以这样做：

.box_1{
    min-width: 4in;
}

现在，如果内容适合它，div默认占用4英寸，如果需要则展开。

更新：
环顾四周，我发现了How to make div not larger than its contents?

所以你需要的是使用以下css：

.box_1{
    display: inline-block;
    min-width: 4in;
}

这会将最小宽度设置为特定数量，并将元素转换为inline-block。但是根据上面链接的帖子，这在IE 7/8中不起作用，因此您需要将div更改为span。

在这里试试：
div =＆gt; http://jsfiddle.net/TdNHs/
span =＆gt; http://jsfiddle.net/TdNHs/1/

Answer 2

 .box_1{
        min-width: 0px !important;
       }

它会尽可能小，也可以扩展

ti将是0px，但是..嘿，你的默认宽度是多少？

<强>更新

http://jsfiddle.net/tbUUt/1/

我只使用了te expandable div中的内容，但是你可以逐个删除它们，div会调整大小。

#box_1{
        border: 1px solid red;
        display: inline-block;

       }

<div id="box_1">

    <div style="border:1px solid blue; width: 50px; height:50px;float:left;"></div>
     <div style="border:1px solid blue; width: 50px; height:50px;float:left;"></div>
    <div style="border:1px solid blue; width: 50px; height:50px;float:left;"></div>
    <div style="border:1px solid blue; width: 50px; height:50px;float:left;"></div>
    <div style="border:1px solid blue; width: 50px; height:50px;float:left;"></div>
</div>

如何使div的宽度达到某个x px但也可以扩展？

2 个答案: