Question

我正在尝试使用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;，红色条会消失。

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

Answer 1

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>

Answer 2

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

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

如果您打算.widget__stars min-width ...

... 还必须.widget__bar min-width（或max-width或width）。

否则，.widget__stars将删除.widget__bar。

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

尝试添加：

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

表格单元格的动态宽度

3 个答案: