使用表格單元的動態寬度

我正在嘗試使用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

使用表格單元的動態寬度

回答

相關問題