【问题标题】:make <div> take only content space: disable stretching使 <div> 只占用内容空间:禁用拉伸
【发布时间】:2012-12-24 10:49:32
【问题描述】:

我有一个带有一些嵌套 div 的 &lt;div&gt;。它们都具有相同的高度。我需要父 &lt;div&gt; 来获取这么多 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>

【问题讨论】:

标签: html styles


【解决方案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,因此您需要在您支持的浏览器中检查它。

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

【讨论】:

  • 漂亮!谢谢。 (这是自定义控件 ASP 的结果标记)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-11
  • 1970-01-01
  • 1970-01-01
  • 2014-11-17
  • 1970-01-01
相关资源
最近更新 更多