テーブルセルの動的幅

Question

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

あなたは赤いバーが消えmin-width: 48px;に.widget__starsの幅を設定した場合。

これを修正する方法についてのご意見はありますか？これを追加する

Answer 1

フレキシボックスには、それを行うことができます。

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

Answer 2

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

Answer 3

あなたは が消える.widget__starsmin-width: 48px;に赤いバーの幅を設定した場合。

これを修正する方法についてのご意見はありますか？

あなたは与えるしようとしている場合 .widget__stars min-width ...

...あなたもを与える必要が.widget__barmin-width（またはmax-width、またはwidth）。

その他の場合、.widget__starsは.widget__barを削除します。