使用表格单元的动态宽度

我正在尝试使用min-width属性使动态宽度div.widget__stars动态化。但是，当我使用display: table-cell;时，min-width属性会被忽略。使用表格单元的动态宽度

我已经试过display: inline-block;但它没有工作。

红色条（div.widget__bar）也不能有固定的宽度。

这是我的例子：

<div class="container"> 
    <div class="widget-row"> 
    <div class="widget widget__stars">5 stars</div> 
    <div class="widget widget__bar"></div> 
    <div class="widget widget__percent">70%</div> 
    </div> 
</div>

CSS：

.container, 
.widget-row { 
    width: 100%; 
} 

.widget-row { 
    display: table; 
} 
.widget { 
    display: table-cell; 
    vertical-align: middle; 
} 

.widget__bar { 
    background: tomato; 
} 

.widget__stars { 
    width: 48px; 
    padding-right: 5px; 
    font-weight: bold; 
} 

.widget__percent { 
width: 50px; 
padding-left: 5px; 
}

jsFiddle

如果您的.widget__stars设置宽度为min-width: 48px;红色栏消失。

有关如何解决此问题的任何想法？

来源

2016-07-26 brunodd

Flexbox，就可以做到这一点。

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700); 
 
body { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 14px; 
 
} 
 
.widget-row { 
 
    display: flex; 
 
    margin-bottom: 1em; 
 
} 
 
.widget {} .widget__bar { 
 
    background: tomato; 
 
    flex: 1 
 
} 
 
.widget__stars { 
 
    padding-right: 5px; 
 
    font-weight: bold; 
 
} 
 
.widget__percent { 
 
    width: 50px; 
 
    padding-left: 5px; 
 
}

<div class="widget-row"> 
 
    <div class="widget widget__stars">Lorem ipsum dolor sit amet.</div> 
 
    <div class="widget widget__bar"></div> 
 
    <div class="widget widget__percent">70%</div> 
 
</div> 
 

 

 
<div class="widget-row"> 
 
    <div class="widget widget__stars">5 Stars</div> 
 
    <div class="widget widget__bar"></div> 
 
    <div class="widget widget__percent">70%</div> 
 
</div>

来源

2016-07-26 10:57:02

谢谢Paulie_D。我正在寻找类似的CSS技巧，但无法找到它。我尝试使用白色空间：nowrap;但它与其他内容混淆了。所以你的解决方案工作=） – brunodd

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700); 
 

 
body { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 14px; 
 
} 
 

 
.container, 
 
.widget-row { 
 
    width: 100%; 
 
} 
 

 
.widget-row { 
 
    display: table; 
 
} 
 
.widget { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.widget__bar { 
 
    background: tomato; 
 
} 
 

 
.widget__stars { 
 
    width: 48px; 
 
    padding-right: 5px; 
 
    font-weight: bold; 
 
    white-space: nowrap; 
 
} 
 

 
.widget__percent { 
 
width: 50px; 
 
padding-left: 5px; 
 
}

<div class="container"> 
 
    <div class="widget-row"> 
 
    <div class="widget widget__stars">5 stars or 6 star or 7 stars...just long text here</div> 
 
    <div class="widget widget__bar"></div> 
 
    <div class="widget widget__percent">70%</div> 
 
    </div> 
 
</div>

尝试添加此：

.widget__stars { 
    width: 48px; 
    padding-right: 5px; 
    font-weight: bold; 
    white-space: nowrap; 
}

来源

2016-07-26 10:52:58

如果设置.widget__stars到min-width: 48px;红条消失的宽度。

有关如何解决此问题的任何想法？

如果你想给一个.widget__stars ... min-width

...你也得给.widget__bar一个min-width（或max-width，或width）。

否则，.widget__stars将消除.widget__bar。

来源

2016-07-26 10:59:45 Rounin

使用表格单元的动态宽度

回答

相关问题