div元素如何只在CSS3 Flexbox中的内部内容的空间？ [英] How can Div Elements take only the Space of their inner Content in a CSS3 Flexbox?

问题描述

我有以下HTML结构：

 < div class =indicator>< / div& 
< div class =mainPanel> 
< div> Speichern< / div> 
< div> Style< / div> 
< div> Speichern< / div> 
< / div> 
  

mainPanel包含三个元素。中心元素应始终位于中心，如下所示：

这里是我使用的css代码

  .indicator {
 -webkit-box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 box-sizing：border-box; 
 position：absolute; 
 width：150px; 
 height：50px; 
 border-right：1px solid red; 
 z-index：-10; 
} 
 .mainPanel {
 width：300px; 
 height：50px; 
 -webkit-box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 box-sizing：border-box; 
 display：-webkit-box; 
 display：-ms-flexbox; 
 display：-webkit-flex; 
 display：flex; 
 -webkit-box-pack：justify; 
 -ms-flex-pack：justify; 
 -webkit-justify-content：space-between; 
 justify-content：space-between; 
 -webkit-box-align：center; 
 -ms-flex-align：center; 
 -webkit-align-items：center; 
 align-items：center; 
} 
 .mainPanel> div {
 padding：0 10px; 
 overflow：hidden; 
 text-overflow：ellipsis; 
 white-space：nowrap; 
 flex：1 1 25％; 
 border：solid 1px＃999; 
} 
 .mainPanel> div：nth-​​child（1）{
 background：red; 
 display：inline-block; 
} 
 
 .mainPanel> div：nth-​​child（3）{
 background：lime; 
} 
 
 .mainPanel> div：nth-​​child（2）{
 flex：900 0 auto; 
 
 background：yellow; 
 text-align：center; 
} 
  

我希望中心的内容不能超过左右部分。

我如何才能使左侧和右侧元素的宽度至多等于其内容的大小？如何实现左右元素的宽度不能小于其内部内容？

下面是它的外观： / p>

解决方案

这是另一种也许更简单的方法来实现它

  .bar {background：yellow; line-height：30px;位置：相对; text-align：center; width：300px;} .bar：before，.bar：after {padding：0 10px; position：absolute; top：0; } .bar：before {background-color：red; content：attr（data-left）; left：0; } .bar：after {background-color：lime; content：attr（data-right）; right：0; }  

 < div class =bardata-left =Ldata-right =Speichern> Style< / div>  

I have the following HTML structure:

<div class="indicator"></div>
<div class="mainPanel">
    <div>Speichern</div>
    <div>Style</div>
    <div>Speichern</div>
</div>

The mainPanel contains three elements. The element in the center should always be in the center as shown here:

Here is the css code I use

.indicator {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    width: 150px;
    height: 50px;
    border-right: 1px solid red;
    z-index: -10;
}
.mainPanel {
    width: 300px;
    height: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.mainPanel > div {
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 25%;
    border: solid 1px #999;
}
.mainPanel > div:nth-child(1) {
    background: red;
    display: inline-block;
}

.mainPanel > div:nth-child(3) {
    background: lime;
}

.mainPanel > div:nth-child(2) {
    flex: 900 0 auto;

    background: yellow;
    text-align: center;
}

I want that the content in the center cannot grow over the left and right part.

How can I make it that the left and the right element take as width at most the size of their inner content? How can I achieve that the left and the right element can not be smaller in width than their inner content?

Here is how it should look like:

解决方案

Here's another, maybe easier, way to achieve it

.bar {
  background: yellow;
  line-height: 30px;
  position: relative;
  text-align: center;
  width: 300px;}
  .bar:before, .bar:after {
    padding: 0 10px;
    position: absolute;
    top: 0;
  }
  .bar:before {
    background-color: red;
    content: attr(data-left);
    left: 0;
  }
  .bar:after {
    background-color: lime;
    content: attr(data-right);
    right: 0;
  }

<div class="bar" data-left="L" data-right="Speichern">Style</div>

这篇关于div元素如何只在CSS3 Flexbox中的内部内容的空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！