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

У меня есть гибкий контейнер с двумя элементами: изображением и элементом div, содержащим текст и поле поиска. Если окно достаточно широкое, я хочу, чтобы текстовый блок отображался справа от изображения, перенося текст и сужая поле поиска по мере необходимости. Если окно недостаточно широкое (как телефон, удерживаемый вертикально), я хочу, чтобы текстовый элемент div отображался под изображением.

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

  body {
      background-color: #dbd2c3;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 80%;
  }
  .hdr-container {
      display: flex;
      flex-wrap: wrap;
      outline: 2px solid #e73;
  }
  .logo-div {
      margin-right: 1em;   /* gap for not wrapped */
      margin-bottom: 1em;  /* gap for wrapped */
      outline: 2px solid green;
  }
  .logo-img {
      max-width:100%;         /* prevent clipping in narrow viewport */
      object-fit: scale-down; /* shrink as needed to maintain max-width */
  }
  .menu-div {
      align-self: center;
      outline: 2px solid yellow;
  }
  .menu-div p {
      margin: 0;
      outline: 2px solid cyan;
  }
  .search-div {
      margin-top: 1em;
      width: 400px;
      //min-width: 200px;
  }
  .search-text {
      border-radius: 6px;
  }

<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <div class = "hdr-container">
    <div class = "logo-div">
      <img src = "https://picsum.photos/400/175" alt = "header"
           class = "logo-img"
           title = "home" border = "1">
    </div>

    <div class = "menu-div">
      <p>
      <strong>SETLISTS:&nbsp
        Lorem ipsum&nbsp;|
        odor amet&nbsp;|
        consectetuer adipiscing elit&nbsp;|
        Senectus aliquet&nbsp;|
        tempor laoreet
      </p>
      <p>
        GALLERIES:&nbsp;
        Lorem ipsum&nbsp;|
        odor amet&nbsp;|
        consectetuer adipiscing elit&nbsp;|
        Senectus aliquet&nbsp;|
        tempor laoreet
      </p>
      <p>
        STUFF:&nbsp;
        Lorem ipsum&nbsp;|
        odor amet&nbsp;|
        consectetuer adipiscing elit&nbsp;|
        Senectus aliquet&nbsp;|
      </strong>
      </p>
      <div class = "search-div">
        <form action = "/scripts/search.pl" method = "post">
          <input type = "text" class = "search-text" placeholder = "Search for things . . ." name = "terms">
          <button type = "submit">GO
          </button>
          &nbsp;&nbsp;
          <a href = "/scripts/power-search.pl" title = "Advanced Search">Advanced&nbsp;Search</a>
        </form>
      </div>

      <p><i>(Search for dates, years, songs, words, etc. Use % as a wildcard. Examples: 5/1/81, 12/31/%, 1972, dark star, midnites)</i></p>
   </div>
  </div>
  <hr>
  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.
</body>

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

Попробуйте добавить max-width: 100% к .menu-div.

— 02.09.2024 02:24

html css flexbox

02.09.2024 01:50

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

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

Ответы 1

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

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

Я бы порекомендовал стилизовать .hdr-container, используя сетку вместо гибкой. Сетка позволяет легко контролировать ширину области просмотра, при которой столбцы будут складываться для просмотра на мобильных устройствах (или ширину, при которой они будут разкладываться для просмотра на рабочем столе), а также легко управлять шириной столбцов (я задал им пропорциональную ширину 1:2). .

Я также удалил некоторые неразрывные пробелы и фиксированную ширину .search-div, чтобы облегчить перенос элементов.

body {
  background-color: #dbd2c3;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 80%;
}
.hdr-container {
  display: grid;
  gap: 1em;
  outline: 2px solid #e73;
}
@media (min-width: 500px) {
  .hdr-container {
    grid-template-columns: 1fr 2fr;
  }
}
.logo-div {
  outline: 2px solid green;
}
.logo-img {
  width: 100%;
  border: 2px solid black;
  box-sizing: border-box;
}
.menu-div {
  align-self: center;
  outline: 2px solid yellow;
}
.menu-div p {
  margin: 0;
  outline: 2px solid cyan;
}
.search-div {
  margin-top: 1em;
}
.search-text {
  border-radius: 6px;
}

<div class = "hdr-container">

  <div class = "logo-div">
    <img src = "https://picsum.photos/400/175" class = "logo-img">
  </div>

  <div class = "menu-div">
    <p>
      <strong>SETLISTS:</strong>
      Lorem ipsum&nbsp;|
      odor amet&nbsp;|
      consectetuer adipiscing elit&nbsp;|
      Senectus aliquet&nbsp;|
      tempor laoreet
    </p>
    <p>
      <strong>GALLERIES:</strong>
      Lorem ipsum&nbsp;|
      odor amet&nbsp;|
      consectetuer adipiscing elit&nbsp;|
      Senectus aliquet&nbsp;|
      tempor laoreet
    </p>
    <p>
      <strong>STUFF:</strong>
      Lorem ipsum&nbsp;|
      odor amet&nbsp;|
      consectetuer adipiscing elit&nbsp;|
      Senectus aliquet&nbsp;|
    </p>

    <div class = "search-div">
      <form action = "/scripts/search.pl" method = "post">
        <input type = "text" class = "search-text" placeholder = "Search for things . . ." name = "terms">
        <button type = "submit">GO
        </button>
        <a href = "/scripts/power-search.pl" title = "Advanced Search">Advanced Search</a>
      </form>
    </div>

    <p><i>(Search for dates, years, songs, words, etc. Use % as a wildcard. Examples: 5/1/81, 12/31/%, 1972, dark star, midnites)</i></p>

  </div>
</div>

<hr>

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.

Эффектный ответ! Правильно, полезно и поучительно. Если вы согласны, не могли бы вы восстановить align-self:center в меню-div, как оно было у меня изначально? Я не думаю, что это что-то повредит.

— 02.09.2024 20:22

Конечно, это сделано

— 03.09.2024 04:22

02.09.2024 02:51