Как исправить элементы div на краю большего элемента div

Я пытаюсь закодировать простую таблицу среднемесячной погоды с 12 элементами внутри большего элемента, и каждый «месячный элемент» показывает смайлики и температуру HI/LO. Изображение макета ниже:

Моя проблема связана с отзывчивостью на мобильном устройстве/планшете. Я бы хотел, чтобы он разделился на 2 (или даже 3) строки, если необходимо, в зависимости от ширины экрана и выглядело примерно так:

Однако я не слишком уверен, как это сделать. В настоящее время разрыв между краем маленького элемента div и большим внешним элементом div будет увеличиваться до тех пор, пока он не сможет вместить еще один маленький элемент div. Вместо этого я не хочу, чтобы расстояние менялось - я бы предпочел, чтобы оно переместилось на другую строку.

Вот что у меня есть на данный момент:

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

.weather-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 10px;
  border-radius: 15px;
  border: 2px solid #000;
  /* Curved black border */
  max-width: 100%;
  background-color: #fff;
  /* Ensure white background inside the border */
}

.weather-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  width: 80px;
  background-color: #fff;
  position: relative;
}

.weather-icon {
  font-size: 36px;
}

.temperature {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 5px;
  font-size: 18px;
}

.temperature span {
  width: 45%;
  text-align: center;
}

.month-label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}

.separator {
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: #000;
}


/* Remove separator from the last box */

.weather-box:last-child .separator {
  display: none;
}

<h2>New York City Monthly Weather Forecast</h2>

<div class = "weather-container">
  <div class = "weather-box">
    <div class = "month-label">January</div>
    <div class = "weather-icon">☁️</div>
    <!-- Cloudy -->
    <div class = "temperature">
      <span>HI 39°</span>
      <span>LO 26°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">February</div>
    <div class = "weather-icon">☀️</div>
    <!-- Sunny -->
    <div class = "temperature">
      <span>HI 42°</span>
      <span>LO 29°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">March</div>
    <div class = "weather-icon">☀️</div>
    <!-- Sunny -->
    <div class = "temperature">
      <span>HI 50°</span>
      <span>LO 35°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">April</div>
    <div class = "weather-icon">🌧️</div>
    <!-- Rainy -->
    <div class = "temperature">
      <span>HI 61°</span>
      <span>LO 45°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">May</div>
    <div class = "weather-icon">☀️</div>
    <!-- Sunny -->
    <div class = "temperature">
      <span>HI 71°</span>
      <span>LO 54°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">June</div>
    <div class = "weather-icon">☀️</div>
    <!-- Sunny -->
    <div class = "temperature">
      <span>HI 79°</span>
      <span>LO 64°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">July</div>
    <div class = "weather-icon">☀️</div>
    <!-- Sunny -->
    <div class = "temperature">
      <span>HI 84°</span>
      <span>LO 69°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">August</div>
    <div class = "weather-icon">☀️</div>
    <!-- Sunny -->
    <div class = "temperature">
      <span>HI 83°</span>
      <span>LO 68°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">September</div>
    <div class = "weather-icon">🌧️</div>
    <!-- Rainy -->
    <div class = "temperature">
      <span>HI 76°</span>
      <span>LO 61°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">October</div>
    <div class = "weather-icon">☁️</div>
    <!-- Cloudy -->
    <div class = "temperature">
      <span>HI 65°</span>
      <span>LO 50°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">November</div>
    <div class = "weather-icon">☁️</div>
    <!-- Cloudy -->
    <div class = "temperature">
      <span>HI 55°</span>
      <span>LO 41°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">December</div>
    <div class = "weather-icon">❄️</div>
    <!-- Snowy -->
    <div class = "temperature">
      <span>HI 45°</span>
      <span>LO 32°</span>
    </div>
  </div>
</div>

Вероятно, проще всего, если вы вставите несколько разделителей в соответствующие места, которые вы скроете, когда не хотите переходить на новую строку в этой позиции, и установите для них значение width: 100%, когда вы это сделаете.

— 03.09.2024 09:30

html css

03.09.2024 09:15

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

.weather-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 10px;
  border-radius: 15px;
  border: 2px solid #000;
  max-width: 100%;
  background-color: #fff;
}

.weather-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  width: 80px;
  background-color: #fff;
  position: relative;
  margin: 10px;
  flex: 1 1 80px;
  max-width: 120px;
}

.weather-icon {
  font-size: 36px;
}

.temperature {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 5px;
  font-size: 18px;
}

.temperature span {
  width: 45%;
  text-align: center;
}

.month-label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}

.separator {
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: #000;
}

/* remove separator from last box */
.weather-box:last-child .separator {
  display: none;
}

@media (max-width: 1200px) {
  .weather-box {
    flex: 1 1 100px; /* Allows more space per box */
  }
}

@media (max-width: 768px) {
  .weather-box {
    flex: 1 1 120px; /* Allows the box to grow larger */
  }
}

@media (max-width: 480px) {
  .weather-box {
    flex: 1 1 100%; /* Full width for small screens */
  }
}

<h2>New York City Monthly Weather Forecast</h2>

<div class = "weather-container">
  <div class = "weather-box">
    <div class = "month-label">January</div>
    <div class = "weather-icon">☁️</div>
    <!-- Cloudy -->
    <div class = "temperature">
      <span>HI 39°</span>
      <span>LO 26°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">February</div>
    <div class = "weather-icon">☀️</div>
    <!-- Sunny -->
    <div class = "temperature">
      <span>HI 42°</span>
      <span>LO 29°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">March</div>
    <div class = "weather-icon">☀️</div>
    <!-- Sunny -->
    <div class = "temperature">
      <span>HI 50°</span>
      <span>LO 35°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">April</div>
    <div class = "weather-icon">🌧️</div>
    <!-- Rainy -->
    <div class = "temperature">
      <span>HI 61°</span>
      <span>LO 45°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">May</div>
    <div class = "weather-icon">☀️</div>
    <!-- Sunny -->
    <div class = "temperature">
      <span>HI 71°</span>
      <span>LO 54°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">June</div>
    <div class = "weather-icon">☀️</div>
    <!-- Sunny -->
    <div class = "temperature">
      <span>HI 79°</span>
      <span>LO 64°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">July</div>
    <div class = "weather-icon">☀️</div>
    <!-- Sunny -->
    <div class = "temperature">
      <span>HI 84°</span>
      <span>LO 69°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">August</div>
    <div class = "weather-icon">☀️</div>
    <!-- Sunny -->
    <div class = "temperature">
      <span>HI 83°</span>
      <span>LO 68°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">September</div>
    <div class = "weather-icon">🌧️</div>
    <!-- Rainy -->
    <div class = "temperature">
      <span>HI 76°</span>
      <span>LO 61°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">October</div>
    <div class = "weather-icon">☁️</div>
    <!-- Cloudy -->
    <div class = "temperature">
      <span>HI 65°</span>
      <span>LO 50°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">November</div>
    <div class = "weather-icon">☁️</div>
    <!-- Cloudy -->
    <div class = "temperature">
      <span>HI 55°</span>
      <span>LO 41°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">December</div>
    <div class = "weather-icon">❄️</div>
    <!-- Snowy -->
    <div class = "temperature">
      <span>HI 45°</span>
      <span>LO 32°</span>
    </div>
  </div>
</div>

это по-прежнему сохраняет все в одной большой рамке - можете ли вы разделить ее на отдельные?

— 03.09.2024 10:03

03.09.2024 09:36

Ответ принят как подходящий

Чтобы динамически разделять контейнеры на основе количества столбцов в строке, вам потребуется использовать JavaScript для переноса каждого набора элементов weather-box в отдельные элементы weather-container в зависимости от текущей ширины экрана.

document.addEventListener('DOMContentLoaded', function() {
  function groupWeatherBoxes() {
    const weatherWrapper = document.getElementById('weather-container');
    const weatherBoxes = Array.from(weatherWrapper.getElementsByClassName('weather-box'));
    const screenWidth = window.innerWidth;
    let columns = 6; // Default to 6 columns

    if (screenWidth <= 1024) {
      columns = 4;
    }
    if (screenWidth <= 1024) {
      columns = 4;
    } 
    if (screenWidth <= 768) {
      columns = 3;
    } 
    if (screenWidth <= 480) {
      columns = 2;
    }
    if (screenWidth <= 354) {
      columns = 1;
    }

    // Clear the weather-wrapper
    weatherWrapper.innerHTML = '';

    // Group weather-boxes into separate containers
    for (let i = 0; i < weatherBoxes.length; i += columns) {
      const weatherContainer = document.createElement('div');
      weatherContainer.classList.add('weather-container');

      for (let j = i; j < i + columns && j < weatherBoxes.length; j++) {
        weatherContainer.appendChild(weatherBoxes[j]);
      }

      weatherWrapper.appendChild(weatherContainer);
    }
  }

  groupWeatherBoxes(); // Initial call to group boxes
  window.addEventListener('resize', groupWeatherBoxes); // Re-group on window resize
});

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

.weather-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  max-width: 100%;
  margin-bottom: 20px; /* Space between containers */
  border-radius: 15px;
  border: 2px solid #000;
  background-color: #fff;
}

.weather-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #ddd; 
  margin: 5px;
  box-sizing: border-box;
}

.weather-icon {
  font-size: 36px;
}

.temperature {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
  font-size: 18px;
}

.month-label {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

<h2>New York City Monthly Weather Forecast</h2>

<div id = "weather-container">
  <div class = "weather-box">
    <div class = "month-label">January</div>
    <div class = "weather-icon">☁️</div>
    <div class = "temperature">
      <span>HI 39°</span>
      <span>LO 26°</span>
    </div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">February</div>
    <div class = "weather-icon">☀️</div>
    <!-- Sunny -->
    <div class = "temperature">
      <span>HI 42°</span>
      <span>LO 29°</span>
    </div>
    <div class = "separator"></div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">March</div>
    <div class = "weather-icon">☀️</div>
    <!-- Sunny -->
    <div class = "temperature">
      <span>HI 50°</span>
      <span>LO 35°</span>
    </div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">April</div>
    <div class = "weather-icon">🌧️</div>
    <!-- Rainy -->
    <div class = "temperature">
      <span>HI 61°</span>
      <span>LO 45°</span>
    </div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">May</div>
    <div class = "weather-icon">☀️</div>
    <!-- Sunny -->
    <div class = "temperature">
      <span>HI 71°</span>
      <span>LO 54°</span>
    </div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">June</div>
    <div class = "weather-icon">☀️</div>
    <!-- Sunny -->
    <div class = "temperature">
      <span>HI 79°</span>
      <span>LO 64°</span>
    </div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">July</div>
    <div class = "weather-icon">☀️</div>
    <!-- Sunny -->
    <div class = "temperature">
      <span>HI 84°</span>
      <span>LO 69°</span>
    </div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">August</div>
    <div class = "weather-icon">☀️</div>
    <!-- Sunny -->
    <div class = "temperature">
      <span>HI 83°</span>
      <span>LO 68°</span>
    </div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">September</div>
    <div class = "weather-icon">🌧️</div>
    <!-- Rainy -->
    <div class = "temperature">
      <span>HI 76°</span>
      <span>LO 61°</span>
    </div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">October</div>
    <div class = "weather-icon">☁️</div>
    <!-- Cloudy -->
    <div class = "temperature">
      <span>HI 65°</span>
      <span>LO 50°</span>
    </div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">November</div>
    <div class = "weather-icon">☁️</div>
    <!-- Cloudy -->
    <div class = "temperature">
      <span>HI 55°</span>
      <span>LO 41°</span>
    </div>
  </div>
  <div class = "weather-box">
    <div class = "month-label">December</div>
    <div class = "weather-icon">❄️</div>
    <!-- Snowy -->
    <div class = "temperature">
      <span>HI 45°</span>
      <span>LO 32°</span>
    </div>
  </div>
</div>

это по-прежнему сохраняет все в одной большой рамке - можете ли вы разделить ее на отдельные?

— 03.09.2024 10:02

03.09.2024 09:49

Я не уверен, чего вы пытаетесь достичь. Если вы хотите, чтобы во всех строках было одинаковое количество ячеек, у вас есть 12 строк, которые можно разделить на 2, 3, 4 или 6.

Вычислив отступы и поля родительского поля и поля погоды, вы можете использовать макет отображения сетки и отображать их в большем количестве строк в зависимости от ширины области просмотра.

Я установил displayweather-container на grid, изменил ширину weather-box на auto, а затем, рассчитав минимальный размер каждого макета (120 * n + 24 + 16), создал несколько макетов сетки на основе размера экрана и скрыл разделитель в конец каждой строки:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 50px;
}

.weather-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    justify-items: center;
    margin: 0 auto;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #000;
    /* Curved black border */
    max-width: 100%;
    background-color: #fff;
    /* Ensure white background inside the border */
}

.weather-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    width: auto;
    background-color: #fff;
    position: relative;
}

.weather-icon {
    font-size: 36px;
}

.temperature {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 5px;
    font-size: 18px;
}

.temperature span {
    width: 45%;
    text-align: center;
}

.month-label {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}

.separator {
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background-color: #000;
}


/* Remove separator from the last box */

.weather-box:last-child .separator {
    display: none;
}

@media (max-width: 1480px) and (min-width: 760px) {
    .weather-container {
        grid-template-columns: repeat(6, 1fr);
    }

    .weather-box:nth-child(6n) .separator {
        display: none;
    }
}

@media (max-width: 760px) and (min-width: 520px) {
    .weather-container {
        grid-template-columns: repeat(4, 1fr);
    }

    .weather-box:nth-child(4n) .separator {
        display: none;
    }
}

@media (max-width: 520px) and (min-width: 400px) {
    .weather-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .weather-box:nth-child(3n) .separator {
        display: none;
    }
}

@media (max-width: 400px) {
    .weather-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .weather-box:nth-child(2n) .separator {
        display: none;
    }
}

<div class = "weather-container">
    <div class = "weather-box">
        <div class = "month-label">January</div>
        <div class = "weather-icon">☁️</div>
        <!-- Cloudy -->
        <div class = "temperature">
            <span>HI 39°</span>
            <span>LO 26°</span>
        </div>
        <div class = "separator"></div>
    </div>
    <div class = "weather-box">
        <div class = "month-label">February</div>
        <div class = "weather-icon">☀️</div>
        <!-- Sunny -->
        <div class = "temperature">
            <span>HI 42°</span>
            <span>LO 29°</span>
        </div>
        <div class = "separator"></div>
    </div>
    <div class = "weather-box">
        <div class = "month-label">March</div>
        <div class = "weather-icon">☀️</div>
        <!-- Sunny -->
        <div class = "temperature">
            <span>HI 50°</span>
            <span>LO 35°</span>
        </div>
        <div class = "separator"></div>
    </div>
    <div class = "weather-box">
        <div class = "month-label">April</div>
        <div class = "weather-icon">🌧️</div>
        <!-- Rainy -->
        <div class = "temperature">
            <span>HI 61°</span>
            <span>LO 45°</span>
        </div>
        <div class = "separator"></div>
    </div>
    <div class = "weather-box">
        <div class = "month-label">May</div>
        <div class = "weather-icon">☀️</div>
        <!-- Sunny -->
        <div class = "temperature">
            <span>HI 71°</span>
            <span>LO 54°</span>
        </div>
        <div class = "separator"></div>
    </div>
    <div class = "weather-box">
        <div class = "month-label">June</div>
        <div class = "weather-icon">☀️</div>
        <!-- Sunny -->
        <div class = "temperature">
            <span>HI 79°</span>
            <span>LO 64°</span>
        </div>
        <div class = "separator"></div>
    </div>
    <div class = "weather-box">
        <div class = "month-label">July</div>
        <div class = "weather-icon">☀️</div>
        <!-- Sunny -->
        <div class = "temperature">
            <span>HI 84°</span>
            <span>LO 69°</span>
        </div>
        <div class = "separator"></div>
    </div>
    <div class = "weather-box">
        <div class = "month-label">August</div>
        <div class = "weather-icon">☀️</div>
        <!-- Sunny -->
        <div class = "temperature">
            <span>HI 83°</span>
            <span>LO 68°</span>
        </div>
        <div class = "separator"></div>
    </div>
    <div class = "weather-box">
        <div class = "month-label">September</div>
        <div class = "weather-icon">🌧️</div>
        <!-- Rainy -->
        <div class = "temperature">
            <span>HI 76°</span>
            <span>LO 61°</span>
        </div>
        <div class = "separator"></div>
    </div>
    <div class = "weather-box">
        <div class = "month-label">October</div>
        <div class = "weather-icon">☁️</div>
        <!-- Cloudy -->
        <div class = "temperature">
            <span>HI 65°</span>
            <span>LO 50°</span>
        </div>
        <div class = "separator"></div>
    </div>
    <div class = "weather-box">
        <div class = "month-label">November</div>
        <div class = "weather-icon">☁️</div>
        <!-- Cloudy -->
        <div class = "temperature">
            <span>HI 55°</span>
            <span>LO 41°</span>
        </div>
        <div class = "separator"></div>
    </div>
    <div class = "weather-box">
        <div class = "month-label">December</div>
        <div class = "weather-icon">❄️</div>
        <!-- Snowy -->
        <div class = "temperature">
            <span>HI 45°</span>
            <span>LO 32°</span>
        </div>
    </div>
</div>

03.09.2024 10:33

Вы можете добиться того, чего ожидаете, просмотрев свой CSS, результат вы найдете здесь: https://jsfiddle.net/s2pwxa60/ вы можете растянуть контент, чтобы увидеть результат.

Редактировать

Не уверены, какой результат хотите? вам нужна фиксированная ширина на мобильном телефоне/планшете? ИМХО, это плохая идея, адаптивность была создана для того, чтобы на разных устройствах были разные размеры, и это полезно.

Пояснения:

Поместите границу на поля, а не на контейнер, и добавьте размер поля, чтобы лучше контролировать ширину:

:root {
  --border-separator: 2px solid #000;
}
.weather-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  width: 80px;
  background-color: #fff;
  position: relative;
  border: var(--border-separator);
  border-right: 0;
  margin-bottom: 30px;
  box-sizing: border-box;
}

Обязательно добавьте нужный радиус в первом и последнем поле:

.weather-box:first-child {
  border-radius: 15px 0 0 15px;
}

.weather-box:last-child {
  border-radius: 0 15px 15px 0;
  border-right: var(--border-separator);
}

Затем используйте медиа-запросы для среднего экрана (например):

@media screen and (max-width: 1280px) and (min-width: 991px) {
  .weather-box {
    flex: 1 0 25%;
  }

  .weather-box:nth-child(4n) {
    border-radius: 0 15px 15px 0;
    border-right: var(--border-separator);
  }

  .weather-box:nth-child(4n + 1) {
    border-radius: 15px 0 0 15px;
  }
}

flex: 1 0 25% позволит вам разместить 4 элемента в ряду (100/4 = 25). Затем используйте nth-child(4n), чтобы добавить радиус к каждому первому и последнему элементу каждой строки.

Вы можете контролировать количество элементов, изменяя процент и изменяя n-е значение. И не используйте текущий разделитель, можно легко использовать границу CSS.

03.09.2024 11:01

Другие вопросы по теме

Как отобразить текст поверх изображения без отображения цвета фона

Как настроить ширину отображаемых диаграмм Mermaid в зависимости от размера экрана в Obsidian?

Как я могу переопределить поле родительского элемента в дочернем элементе в CSS (класс и идентификатор)?

Почему меню перекрывает значок гамбургера?

Как сделать так, чтобы панель поиска располагалась вертикально?

Как заставить расположенные рядом элементы div в гибком контейнере обертывать свое содержимое перед тем, как обернуть себя

Как раскрасить столбец таблицы определенным классом в заголовке с помощью CSS?

Исправлен заголовок, содержащий изображение и гамбургер-меню с прокручиваемым содержимым

Проблемы непрозрачности динамических цветов в TailwindCSS

Проблема с пониманием проблемы выравнивания при использовании display inline-flex

Как исправить элементы div на краю большего элемента div

Ответы 4

Другие вопросы по теме

Похожие вопросы