Div高度以适应其内容

Question

我有一些css和html代码来统一分隔按钮（或按钮组）。理由很有效，但由于某种原因，容器div .justified的高度明显高于其内容。

为什么会这样？我希望它与按钮的高度相同。我该怎么做？ （我有jsfiddle that shows my problem等价于以下代码）

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

发生这种情况的原因是stretch元素。它正在创建一个新的内联换行符。中断导致另一行显示在内容下方。如果您想完全正确，请尝试使用floats和clearfix，但快速解决方法是添加以下内容：

.justified { font-size: 0; }

Answer 2

使用flexbox非常简单，没有额外的div或spans。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您应该修改按钮，然后按下按钮。以下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>

Answer 4

添加此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/