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

答案是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 3

这应该有效

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

＆＃13;

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
   #map {
    height: 400px;
    width: 100%;
   }
</style>
</head>
<body>
<h3>La Verendrye</h3>
<div id="map"></div>
<script>
  function initMap() {
    var uluru = {lat: 47.01837498778204, lng: -76.71812826048739};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 11,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=MY-API-CODE&callback=initMap">
</script>
</body>
</html>

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;