Div高度以适合其内容

我有一些CSS和HTML代码来统一分离按钮（或按钮组）。理由很好，但由于某些原因，容器的高度明显高于其内容。Div高度以适合其内容

为什么出现这种情况？我希望它与按钮的高度相同。我该怎么做？（I有一个jsfiddle that shows my problem等效于以下代码）

/* Approach based on these two: */ 
 
/* http://stackoverflow.com/questions/6865194/ */ 
 
/* http://jsfiddle.net/thirtydot/EDp8R/ */ 
 
div.justified { 
 
    text-align: justify; 
 
    -ms-text-justify: distribute-all-lines; 
 
    text-justify: distribute-all-lines; 
 
    border: thin solid purple; 
 
} 
 
div.justified > div { 
 
    border: thin solid green; 
 
    display: inline-block; 
 
    *display: inline; 
 
    zoom: 1; 
 
} 
 
div.justified div.spacer { 
 
    width: 1px; 
 
    display: inline-block; 
 
} 
 
div.justified > span.stretch { 
 
    width: 100%; 
 
    display: inline-block; 
 
    font-size: 0; 
 
    line-height: 0; 
 
}

<br/> 
 
<br/> 
 
example 1: 
 
<div class='justified'> 
 
    <div> 
 
     <button>button1</button> 
 
    </div> 
 
    <div> 
 
     <button>button2</button> 
 
    </div> 
 
    <span class='stretch'></span> 
 
</div> 
 
example 2: 
 
<div class='justified'> 
 
    <div class='spacer'></div> 
 
    <div> 
 
     <button>button1</button> 
 
    </div> 
 
    <span class='stretch'></span> 
 
</div>

来源

2015-08-03 nacho4d

为什么显示：内联块跨越 '拉伸'？这是要求吗？这个问题只是由于这个问题。如果你使用display：block，它会正常工作 – Kenny

@ nacho4d拉伸跨度使它包含了什么？ –

与flexbox很简单，没有多余的div或跨度。

div.justified { 
 
    border: thin solid purple; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: justify; 
 
    -webkit-justify-content: space-between; 
 
     -ms-flex-pack: justify; 
 
      justify-content: space-between; 
 
}

<div class='justified'> 
 
    <button>button1</button> 
 
    <button>button2</button> 
 
</div>

来源

2015-08-03 13:31:01

这看起来非常紧凑。它适用于Chrome和Firefox，但不适用于Safari。我不知道如何IE10或IE11？ – nacho4d

我没有使用前缀版本，但Safari 7.1+支持'flexbox'就像IE10/11- http://caniuse.com/#feat=flexbox –

我不能得到这个在Safari中工作:(显然'显示：-webkit-flex;'是不够的 – nacho4d

发生这种情况的原因是因为所述stretch元件。它正在创建一个新的内联换行符。中断导致另一行出现在内容下方。如果你想获得这完全正确，尝试寻找到使用floats和clearfix，但一个快速的解决办法是补充一点：

.justified { font-size: 0; }

来源

2015-08-03 13:10:47

这工作。但在我的情况'font-size：0'导致内部按钮的字体大小也是0。我现在正在努力。或许我应该像你说的那样检查浮动和clearfix。 – nacho4d

你有一个div以防万一你的按钮，而你应该修改你的按钮。以下snipplet显示我将如何做到这一点。

/* Based on: */ 
 
/* http://stackoverflow.com/questions/6865194/ */ 
 
/* http://jsfiddle.net/thirtydot/EDp8R/ */ 
 
div.justified { 
 
    text-align: justify; 
 
    -ms-text-justify: distribute-all-lines; 
 
    text-justify: distribute-all-lines; 
 
    border: thin solid purple; 
 
    
 
} 
 
div.justified > button { 
 
    border: thin solid green; 
 
    display: inline-block; 
 
    *display: inline; 
 
    zoom: 1; 
 
} 
 
div.justified div.spacer { 
 
    width: 1px; 
 
    display: inline-block; 
 
} 
 
div.justified > span.stretch { 
 
    width: 100%; 
 
    display: inline-block; 
 
    font-size: 0; 
 
    line-height: 0; 
 
}

<br/> 
 
<br/> 
 
example 1: 
 
<div class='justified'> 
 
     <button>button1</button> 
 
     <button>button2</button> 
 
    <span class='stretch'></span> 
 
</div> 
 
example 2: 
 
<div class='justified'> 
 
    <div class='spacer'></div> 
 
     <button>button1</button> 
 
    <span class='stretch'></span> 
 
</div>

来源

2015-08-03 13:10:51 Silve2611

添加这个CSS -

div.justified { 
    text-align: justify; 
    -ms-text-justify: distribute-all-lines; 
    text-justify: distribute-all-lines; 
    border: thin solid purple; 
    line-height: 0; /* This line */ 
}

http://jsfiddle.net/usqp2qxf/1/

来源

2015-08-03 13:15:44

Div高度以适合其内容

回答

相关问题