3 Столбца изображений на рабочем столе, 2 столбца изображений на мобильном устройстве

ProgramBox

3 Столбца изображений на рабочем столе, 2 столбца изображений на мобильном устройстве

Post author:admin
Запись опубликована:7 февраля, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я пытаюсь создать домашнюю страницу, на которой есть 6 блоков изображений с 3 столбцами. Но также хотите, чтобы эти 6 блоков отображались как 2 столбца на мобильном просмотре.

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

Вот ссылка на jsfiddle — https://jsfiddle.net/7frjmeat /

Вот текущий вид рабочего стола

Вот как я надеюсь, что мобильное представление будет выглядеть —

Код

 html,
body,
a,
{
  width: 100%;
  height: 100%;
  margin: 0;
}

p {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 200%;
}

hr {
  width: 25%;
  height: 1px;
  background: #c6c6c6;
  border: none;
  outline: none;
  margin-bottom: 0.25%;
}

.logo {
  text-align: center;
  width: 20%;
  height: auto;
}

.logo img {
  width: 100%;
  height: auto;
  padding-top: 4%;
}

.flex {
  display: flex;
  max-width: 75%;
  width: 100%;
  height: 100%;
}

.flex div {
  flex: 1;
  padding: 2px;
}

.img1 {
  width: 100%;
  transition: all 0.3s;
  padding-top: 5%;
}

.img1:hover {
  transform: scale(1.03);
}

.line-break {
  width: 100%;
}

@media only screen and (max-width:768px) {
  .logo,
  .logo img {
    display: inline;
    width: 60%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  .flex,
  .flex div,
  .img1,
  img:hover {
    transition: none !important;
    transform: none !important;
    max-width: 100%;
  }
  p {
    font-size: 150%;
    padding-bottom: 10px;
  }
  hr {
    margin-bottom: 5%;
  }
  .line-break {
    width: 0%;
  }
}

 <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <div class="logo">
    <img src="https://via.placeholder.com/742x180" />
  </div>

  <hr>
  <div class="flex">
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
  </div>
  <div class="line-break"></div>
  <div class="flex">
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
  </div>

1. <center></center> сильно устарел

2. Очень вероятно, дубликат. Вам нужно будет не переносить 3 divs в divs

3. Извините, я только начал изучать, как кодировать 4 дня назад! Для меня все в новинку, что вы предлагаете мне сделать, чтобы сосредоточить все? Спасибо.

Ответ №1:

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

В основном задавал ширину элементов, использовал размер поля, чтобы включить отступы в ширину, использовал flex-wrap для переноса содержимого и изменил ширину в мобильной версии на макет с двумя столбцами. ** Редактировать Я также изменил HTML, чтобы поместить все в один гибкий контейнер.

Вот код, работающий для вашего макета. Конечно, он теряет тег HR.

CSS

 html,
body,
a {
  width: 100%;
  height: 100%;
  margin: 0;
}

p {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 200%;
}

hr {
  width: 25%;
  height: 1px;
  background: #c6c6c6;
  border: none;
  outline: none;
  margin-bottom: 0.25%;
}

.logo {
  text-align: center;
  width: 20%;
  height: auto;
}

.logo img {
  width: 100%;
  height: auto;
  padding-top: 4%;
}

.flex {
  display: flex;
  max-width: 75%;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  flex-basis: auto;
  justify-content: space-evenly;
}

.flex div {
  flex: 1;
  padding: 2px;
  min-width: 33%;
  box-sizing: border-box;
}

.img1 {
  width: 100%;
  transition: all 0.3s;
  padding-top: 5%;
}

.img1:hover {
  transform: scale(1.03);
}

.line-break {
  width: 100%;
}

@media only screen and (max-width:768px) {
  .logo,
  .logo img {
    display: inline;
    width: 60%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  .flex,
  .flex div,
  .img1,
  img:hover {
    transition: none !important;
    transform: none !important;
    max-width: 100%;
  }
  p {
    font-size: 150%;
    padding-bottom: 10px;
  }
  hr {
    margin-bottom: 5%;
  }
  .line-break {
    width: 0%;
  }
  .flex div {
    min-width: 50%;
  }
}

HTML

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

<center>
  <div class="logo">
    <img src="https://via.placeholder.com/742x180" />
  </div>

  <hr>
  <div class="flex">
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>

    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
  </div>

</center>

Ответ №2:

Если ширина родительского div является гибкой, но содержимое внутри div необязательно, вы можете использовать display: inline-block в классе image . Это поможет вам получить желаемый эффект.

Примером реализации может быть

 <div class="main-container">
    <img class="inline-image" src="img1">
    ...
</div>

Ответ №3:

Это всего лишь базовый пример; но вы можете добиться такого поведения, используя либо Flexbox, либо CSS Grid, в зависимости от того, как именно вы хотите, чтобы элементы располагались.

Flexbox обычно лучше подходит для одномерных макетов, то есть, когда вы хотите, чтобы элементы были выровнены в одном направлении (столбцы или строки); в то время как CSS Grid намного проще обрабатывать двумерные макеты, где вам нужно, чтобы элементы были выровнены в обоих направлениях.

Взгляните:

 body * {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  justify-content: center;
  grid-gap: 15px;
  grid-auto-rows: minmax(100px, auto);
}

.grid-item {
  border: 1px solid black;
}

.flex {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex-item {
  border: 1px solid blue;
  min-height: 100px;
  flex: 1 1 30%;
  margin: 5px;
}

@media (max-width: 590px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .flex-item {
    border: 1px solid blue;
    min-height: 100px;
    flex: 1 1 45%;
    margin: 5px;
  }
}

 <div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

<div class="flex">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

1. Это делает то, что я хочу, чтобы он делал! Я поиграю с этим кодом и разберусь. Большое вам спасибо!

2. @JohnGavin нет проблем! Определенно рекомендую эти два руководства для Flexbox и CSS Grid … а также имейте в виду некоторые комментарии, в которых говорится <center> , что это устарело; прочитайте немного о HTML5, чтобы лучше узнать, что нового и чего следует избегать 🙂