Question

我有<div>一些嵌套的div。所有这些都有相同的高度。我需要父<div>在内容上花费这么多width（我想应用border-style属性）。财产display:inline（对于父母）对我没有帮助。

这是标记：

   <div style="border-style:solid;height:60px;">
        <div  style="display:inline;float:left;background-color:Aqua;height:60px;width:30px;border-left-style:solid"></div>
        <div  style="display:inline;float:left;background-color:Black;height:60px;width:30px;border-left-style:solid"></div>
        ......       
   </div>

Answer 1

使用display: inline-block;似乎有效：

 <div style="display:inline-block;border-style:solid;height:60px;">
        <div  style="display:inline;float:left;background-color:Aqua;height:60px;width:30px;border-left-style:solid"></div>
        <div  style="display:inline;float:left;background-color:Black;height:60px;width:30px;border-left-style:solid"></div>
   </div>

jsFiddle Demo

某些较旧的浏览器不支持inline-block，因此您需要在支持的浏览器中进行检查。

我假设这些样式会在某些时候进入样式表，而不是纯粹的内联。

make <div>只占用内容空间：禁用拉伸</div>

1 个答案: