无法在 CSS 中设置 display:table 的高度

Question

我正在尝试在 CSS 中创建一个 grid/table，其中每个单元格都包含一些内容。但是，第一行的内容被第二行的内容截断了。我假设我需要增加每个单元格的高度，但每当我使用高度属性时，都没有任何变化。这是代码：

HTML

<div class="grid-container outline">
    <div class="row">
        <div class="col-0"><p>Featured</p></div>
    </div>
<div class="row">
    <div class="col-1">Content Here</div>
    <div class="col-1">Content Here</div>
    <div class="col-1">Content Here</div>
</div>
<div class="row">
    <div class="col-1">Content Here</div>
    <div class="col-1">Content Here</div>
    <div class="col-1">Content Here</div>
</div>

</div>

CSS

.grid-container {

         width: 100%;
         max-width: 1200px;
         margin: 0 auto;
         border-top: 12px solid #03A3D3;
 }

 .row:before,
 .row:after {
         content:"";
         display: table ;
         clear:both;
 }


 .col-1 { 
          width: 20%;
          float: left;
          padding: 20px;

 }

 .col-1 > p {
          background-color: #03A3D3;
          padding: 0;
          margin: 0;
          text-align: center;
          color: white;
 }

谢谢！

Answer 1

你可以考虑使用display:flex这个布局

Div 要将宽度和高度设置为 100% body 还需要将高度和宽度设置为 100%，您可以考虑使用视口宽度和高度

检查这个片段

.grid-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  border: 12px solid #03A3D3;
}
.row {
  display: flex;
  border: 1px solid;
}
.row * {
  
}
.col-1 {
  width: 25vw;
 height: 30vh;
  overflow: auto;
  border: 1px solid;
  padding: 20px;
}
.col-1 > p {
  background-color: #03A3D3;
  padding: 0;
  margin: 0;
  text-align: center;
  color: white;
}

<div class="grid-container outline">
  <div class="row">
    <div class="col-0">
      <p>Featured Featured FeaturedFeaturedFeaturedFeaturedFeaturedFeaturedFeaturedFeaturedFeaturedFeatured
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col-1">Content Here</div>
    <div class="col-1">Content Here</div>
    <div class="col-1">Content Here</div>
  </div>
  <div class="row">
    <div class="col-1">Content Here Content HereContent HereContent HereContent HereContent HereContent HereContent HereContent HereContent HereContent HereContent HereContent HereContent Here Content HereContent HereContent HereContent HereContent HereContent HereContent
      HereContent HereContent HereContent HereContent HereContent HereContent Here Content HereContent HereContent HereContent HereContent HereContent HereContent HereContent HereContent HereContent HereContent HereContent Here</div>
    <div class="col-1">Content Here</div>
    <div class="col-1">Content Here</div>
  </div>

</div>

希望对您有所帮助

Answer 2

我们也可以在不使用 display:flex 的情况下像下面的代码片段一样尝试。 flex 将不支持旧浏览器。

.grid-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-top: 12px solid #03A3D3;
}
.row:before, .row:after{
 content:"";
  display: block;
  clear: both;
  width: 100%;
}
.col-1 { 
  width: 33.33%;
  float: left;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  height: 120px;
  margin-top: -1px;
  margin-left: -1px;
  overflow: auto;
}
.col-1 > p {
  background-color: #eee;
  padding: 10px;
  box-sizing: border-box;
  margin: 0 0px 10px 0px;
  text-align: left;
  color: #444;
}

<div class="grid-container outline">
  <div class="row">
    <div class="col-0">
     <p>Featured</p>
     <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
    </div>
  </div>
 <div class="row">
    <div class="col-1">
     <p>
      Content Here...<br>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
    </div>
    <div class="col-1">Content Here</div>
   <div class="col-1">Content Here</div>
 </div>
 <div class="row">
    <div class="col-1">Content Here</div>
    <div class="col-1">
     <p>
      Content Here...<br>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
    </div>
    <div class="col-1">Content Here</div>
 </div>
</div>

无法在 CSS 中设置 display:table 的高度

Cannot set height of display:table in CSS

html

css

css-tables