Динамическая ширина с табличной ячейкой

Я пытаюсь сделать ширину div.widget__stars динамической, используя min-width. Однако свойство min-width игнорируется при использовании display: table-cell;.Динамическая ширина с табличной ячейкой

Я уже пробовал 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

Thanks Paulie_D. Я искал что-то подобное в CSS Tricks, но не смог найти его. Я пробовал использовать white-space: 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__starsmin-width ...

... вы также должны дать .widget__barmin-width (или max-width или width).

В противном случае .widget__stars уничтожит .widget__bar.

источник

2016-07-26 10:59:45 Rounin

Динамическая ширина с табличной ячейкой

ответ

Смежные вопросы