Question

我是初学者。我做了一个迷你组合画廊。每个“卡片”都有一个图像，标题和标题。我遇到的问题是某些“卡片”比其他“卡片”大（因为它们的标题中有更多文字）。我希望每张卡都能像交错的网格一样向上移动。

我尝试过调整边距和其他CSS技巧，但似乎无法弄清楚。

<style>
    .column {
        float: left;
        width: 50%;
        align-content: inherit;
        padding: 5px 10px;;
        border-collapse: collapse;
    }
    .content {
        background-color: #F1F0F0;
        padding: 20px 20px 8px 20px;
    }
    h3 {
    color: #8A6E4B
    }

    @media screen and (max-width: 900px) {
  .column {
    width: 100%;
  }
    @media screen and (max-width: 600px) {
  .column {
    width: 110%;
    </style>

    <div class="row">
      <div class="column">
        <div class="content">
          <img src="a/6711" />
          <h3>Title 01</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="a/6705" alt="Title 02" style="width: 100%;" />
      <h3>Title 02</h3>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="content">
      <img src="a/6709" alt="Title 03" style="width: 100%;" />
      <h3>Title 03</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="a/6714" alt="Title 04" style="width: 100%;" />
      <h3>Title 04</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>

Answer 1

如果您希望内容块处于等高，请尝试使用CSS网格：

.grid {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 20px;
}

.content {
  background-color: #F1F0F0;
  padding: 20px 20px 8px 20px;
}

h3 {
  color: #8A6E4B
}

<div class="grid">
  <div class="content">
    <img src="a/6711" />
    <h3>Title 01</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
  </div>
  <div class="content">
    <img src="a/6705" alt="Title 02" style="width: 100%;" />
    <h3>Title 02</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>

  <div class="content">
    <img src="a/6709" alt="Title 03" style="width: 100%;" />
    <h3>Title 03</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="content">
    <img src="a/6714" alt="Title 04" style="width: 100%;" />
    <h3>Title 04</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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堆叠在列中即可

：

.grid {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 20px;
}

.content {
  background-color: #F1F0F0;
  padding: 20px 20px 8px 20px;
  margin-bottom: 20px;
}

h3 {
  color: #8A6E4B
}

<div class="grid">
  <div class="column">
    <div class="content">
      <img src="a/6711" />
      <h3>Title 01</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
    </div>
    <div class="content">
      <img src="a/6705" alt="Title 02" style="width: 100%;" />
      <h3>Title 02</h3>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="a/6709" alt="Title 03" style="width: 100%;" />
      <h3>Title 03</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="content">
      <img src="a/6714" alt="Title 04" style="width: 100%;" />
      <h3>Title 04</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>

如何向上移动各种大小的“单元”？

1 个答案: