Question

我想将子内容扩展到全宽。我已经尝试了一切，但我不知道可以运行什么。我只用min-width运行：n px;但我不想以像素为单位定义特定的宽度，因为设计在较小的屏幕中不会自适应。

HTML

<div class="ficha_container">
  <div class="ficha_row">
    <div class="ficha_cell">
      <h1>Title</h1>
      <p>Content.</p>
    </div>
  </div>
</div>

CSS

.ficha_container {
  display: table;
  background-color: green;
  box-sizing: border-box;
  overflow: hidden;
  display: block;
}
.ficha_row {
  display: table-row;
}
.ficha_cell {
  display: table-cell;
}
.ficha_cell p {
  background: pink;
}

Answer 1

假设您需要const objectTypes = require('object-types'); objectTypes({}); //=> 'object' objectTypes([]); //=> 'array' objectTypes(new Object(true)); //=> 'boolean'解决方案，则无法将display:table添加到同一元素。

我猜你为什么这么做，就是把它做成全宽。

要设置display: block全宽，只需将其设置为100％即可，为了使现有标记正常工作，请从table移除display: block并添加.ficha_container < / p>

width: 100%;

.ficha_container{
  display:table;  
  background-color: green;
  box-sizing: border-box;
  width: 100%;
}
.ficha_row{
  display:table-row;
}
.ficha_cell{
  display: table-cell;
}
.ficha_cell p{
  background: pink;
}

将内容展开为完整父级宽度

1 个答案: