主页 / 问题 / 1210541
Accepted
realHikkan
Asked:2021-11-27 17:38:13 +0000 UTC2021-11-27 17:38:13 +0000 UTC

如何将块拉伸到父块的全宽

  • 772

有必要将块拉伸.card到父块的整个宽度，.container同时它们也必须是每行 2 个块。

https://codepen.io/realHikkan/pen/qBaBjwz?editors=1100

html

2 个回答

  1. Best Answer

    您需要属性box-sizing：border-box http://htmlbook.ru/css/box-sizing

    .container {
   width: 100%;
   max-width: 1300px;
   min-width: 768px;
   box-sizing: 'border-box'
}

.card {
   width: calc(50% - 60px);
   padding: 30px 20px;
   border: 1px solid #d5d4d4;
   margin-bottom: 20px;
}

.card:nth-child(even) {
   margin-left: 10px;
}

.card:nth-child(odd) {
   margin-right: 10px;
}
    • 1

  2. 我建议作为熟悉 css-grid 的一个选项。在它的帮助下，排版这些块很容易。有了它，您可以立即创建自适应块，而无需使用媒体查询

    .parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 30px;
}

.card {
  padding: 30px 20px;
  border: 1px solid #d5d4d4;
}
    <div class="parent">
  <article class="card">
    <h3 class="card__title">Даже сам Мозгов не справится с магией «Орландо»</h3>
    <div class="card__description">
      <p>Даже сам Мозгов не справится с магией «Орландо»</p>
    </div>
  </article>
  <article class="card">
    <h3 class="card__title">9 серьёзных тренеров, которые хотят работать в КХЛ. Но нет мест</h3>
    <div class="card__description">
      <p>А что будет, когда количество клубов в КХЛ сократится до 24? И это ещё без учёта Вячеслава Быкова.</p>
    </div>
  </article>
  <article class="card">
    <h3 class="card__title">«Почему все такие грустные? Из-за того что «Зенит» на втором месте?»</h3>
    <div class="card__description">
      <p>Уткин возмущён игрой «Зенита», а Сёмин недоумевает, почему все такие грустные – в лучших фразах 14-го тура РФПЛ!</p>
    </div>
  </article>
  <article class="card">
    <h3 class="card__title">Забег без границ: бежим в поддержку паралимпийцев</h3>
    <div class="card__description">
      <p>В Москве пройдёт единственный в России официальный забег в поддержку спортсменов-инвалидов страны «Паралимпийский сезон».</p>
    </div>
  </article>
</div>

    • 1

相关问题