Div高度以适应其内容 [英] Div height to fit its content

问题描述

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

为什么会发生这种情况？我希望它与按钮的高度相同。我该怎么做？ （我有一个 jsfiddle，显示我的问题等同于以下代码）

/ *基于以下两种方法：* // * http://stackoverflow.com/questions / 6865194 / * // * http://jsfiddle.net/thirtydot/EDp8R/ * / div.justified {text-align：justify; -ms-text-justify：distribute-all-lines; text-justify：分发所有行;边框：细实心紫色;} div.justified> div {border：薄的纯绿色;显示：inline-block; *显示：内联; zoom：1;} div.justified div.spacer {width：1px; display：inline-block;} div.justified> span.stretch {width：100％;显示：inline-block; font-size：0; line-height：0;}

< br /> gt ;< br />例1：< div class ='justified'> < DIV> <按钮> button1的< /按钮> < / DIV> < DIV> <按钮> BUTTON2< /按钮> < / DIV> < span class ='stretch'>< / span>< / div>示例2：< div class ='justified'> < div class ='spacer'>< / div> < DIV> <按钮> button1的< /按钮> < / DIV> < span class ='stretch'>< / span>< / div>

解决方案

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

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

< div类= '正当' > <按钮> button1的< /按钮> <按钮>按钮2< /按钮>< / div>

I have some css and html code to uniformly separate the buttons (or group of buttons). Justification works great but for some reason the container div .justified height is notably taller than its contents.

Why this happens? I want it to be the same height as the buttons. How can i do it? (I have a jsfiddle that shows my problem equivalent to the following code)

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

解决方案

Very simple with flexbox, no extra divs or spans.

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>

这篇关于Div高度以适应其内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！