CSS表格或网格

Question

我想用三张牌创建网格或表格。连续两张牌，这两张牌下面的第三张牌，就像在图像上一样（第三张牌可以是其他尺寸）。但是我怎么能这样做呢？

<div class="cards">

    <div id="card1">
        <img src="..." alt="Image" style="width: 100%">

        <div class="card-container">
        <h4 class="class-text"><b>...</b></h4>
        <p></p>
        </div>
    </div>

    <div id="card2">
        <img src="..." alt="Image" style="width: 100%">

        <div class="card-container">
        <h4 class="class-text"><b>...</b></h4>
        <p></p>
        </div>
    </div>

    <div id="card3">
        <img src="..." alt="Image" style="width: 100%">

        <div class="card-container">
        <h4 class="class-text"><b>...</b></h4>
        <p></p>
        </div>
    </div>

</div>

Answer 1

这应该工作

.first-row{
  display:flex;
}
.first-row .card{
  flex:1;
}
.card{
  border:5px solid black;
  margin: 10px;
}

<div class="cards">
  <div class='first-row'>
    <div class='card' id="card1">
        <img src="..." alt="Image" style="width: 100%">

        <div class="card-container">
        <h4 class="class-text"><b>...</b></h4>
        <p></p>
        </div>
    </div>

    <div class='card' id="card2">
        <img src="..." alt="Image" style="width: 100%">

        <div class="card-container">
        <h4 class="class-text"><b>...</b></h4>
        <p></p>
        </div>
    </div>
  </div>
    <div class='card' id="card3">
        <img src="..." alt="Image" style="width: 100%">

        <div class="card-container">
        <h4 class="class-text"><b>...</b></h4>
        <p></p>
        </div>
    </div>

</div>

Answer 2

看看这个。

.first-row{
  display:flex;
}
.first-row .card{
  flex:1;
}
.card{
  border:5px solid black;
  margin: 10px;
}

<div class="cards">
  <div class='first-row'>
    <div class='card' id="card1">
        <img src="..." alt="Image" style="width: 100%">

        <div class="card-container">
        <h4 class="class-text"><b>...</b></h4>
        <p></p>
        </div>
    </div>

    <div class='card' id="card2">
        <img src="..." alt="Image" style="width: 100%">

        <div class="card-container">
        <h4 class="class-text"><b>...</b></h4>
        <p></p>
        </div>
    </div>
  </div>
    <div class='card' id="card3">
        <img src="..." alt="Image" style="width: 100%">

        <div class="card-container">
        <h4 class="class-text"><b>...</b></h4>
        <p></p>
        </div>
    </div>

</div>

Answer 3

答案是CSS Flex Box;）

section {
  max-width: 740px;
  margin: 0 auto;
  display: flex;
}

.column {
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

section:nth-of-type(5) .column:first-of-type {
  flex-grow: 2;
  flex-shrink: 2;
  flex-basis: 22px;
}

section:nth-of-type(6) .column:nth-of-type(2) {
  flex-grow: 4;
  flex-shrink: 4;
  flex-basis: 66px;
}

/* OTHER STYLES */
  
html, body {
  color: white;
  height: 100%;
  box-sizing: border-box;
}

body {
  font-family: 'Raleway', sans-serif;
  padding: 10px;
  background: linear-gradient(135deg, #b04, #f80) fixed;
}

.column {
  padding: 10px 0;
  background-color: rgba(255, 0, 0, 0.25);
  text-align: center;
  
  border: 1px solid transparentize(white, 0.25);
  background-color: transparentize(white, 0.8);
  color: transparentize(white, 0.1);
}

<section>
  <div class="column">One Third</div>
  <div class="column">One Third</div>
  <div class="column">One Third</div>
</section>

<section>
  <div class="column">One Half</div>
  <div class="column">One Half</div>
</section>

<section>
  <div class="column">One Fourth</div>
  <div class="column">One Fourth</div>
  <div class="column">One Fourth</div>
  <div class="column">One Fourth</div>
</section>

<section>
  <div class="column">One Sixth</div>
  <div class="column">One Sixth</div>
  <div class="column">One Sixth</div>
  <div class="column">One Sixth</div>
  <div class="column">One Sixth</div>
  <div class="column">One Sixth</div>
</section>

<section>
  <div class="column">One Half</div>
  <div class="column">One Fourth</div>
  <div class="column">One Fourth</div>
</section>

<section>
  <div class="column">One Sixth</div>
  <div class="column">Two Thirds</div>
  <div class="column">One Sixth</div>
</section>

Answer 4

.cards {
  display: grid;
  /* Make two tracks with the remaining space*/
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

#card1,
#card2 {
  background: #a03;
}

#card3 {
  background: #be3;
  /*Let card3 span 2 tracks*/
  grid-column: span 2;
}

/*This will make the images span 100%*/
img {
  max-width: 100%;
  height: auto;
}

<div class="cards">

    <div id="card1">
        <img src="https://images.unsplash.com/photo-1440703281807-16ead562a596?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f2b0cfa6c4950efda736ae4308c03420" alt="Image">

        <div class="card-container">
        <h4 class="class-text"><b>...</b></h4>
        <p></p>
        </div>
    </div>

    <div id="card2">
        <img src="https://images.unsplash.com/photo-1440703281807-16ead562a596?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f2b0cfa6c4950efda736ae4308c03420" alt="Image">

        <div class="card-container">
        <h4 class="class-text"><b>...</b></h4>
        <p></p>
        </div>
    </div>

    <div id="card3">
        <img src="https://images.unsplash.com/photo-1440703281807-16ead562a596?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f2b0cfa6c4950efda736ae4308c03420" alt="Image">

        <div class="card-container">
        <h4 class="class-text"><b>...</b></h4>
        <p></p>
        </div>
    </div>

</div>