Вертикально выровненные изображения, перемещающиеся влево, и текст справа, который переносится, если места недостаточно?

ProgramBox

Вертикально выровненные изображения, перемещающиеся влево, и текст справа, который переносится, если места недостаточно?

Post author:admin
Запись опубликована:28 августа, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

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

Вот несколько изображений, иллюстрирующих, что мне нужно. Синий контур представляет размер страницы:

Страница становится уже, и больше текста смещается под изображениями:

Страница становится очень узкой, и весь текст смещается под изображение, хотя в правой части страницы все еще остается пустое пространство:

Чего я не хочу, так это того, что текст втискивается в очень, очень узкий столбец и едва читается:

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

 #wrapper{
  border:1px solid green;
}

#left-div{
  float: left;
  border:1px solid blue;
}

#right-div{
  border:1px solid red;
  min-width: 200px;
}

ul{
  list-style-type: none;
  padding:0;
  margin-right: 15px;
}

 <div id="wrapper">
  <div id="left-div">
  <ul>
    <li><img src="https://i.imgur.com/2YUEcKS.png" />
    </li>
    <li><img src="https://i.imgur.com/2YUEcKS.png" />
    </li>
   </ul>
  </div>  
  <div id="right-div">
    <p>Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. 
    </p>
  </div>
</div>

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

 #wrapper{
  display: flex;
  flex-wrap: wrap;
  border:1px solid green;
}

#left-div{
  float: left;
  border:1px solid blue;
}

.right-div{
  border:1px solid red;
  min-width: 200px;
}

ul{
  list-style-type: none;
  padding:0;
  margin-right: 15px;
}

 <div id="wrapper">
      <div id="left-div">
      <ul>
        <li><img src="https://i.imgur.com/2YUEcKS.png" />
        </li>
        <li><img src="https://i.imgur.com/2YUEcKS.png" />
        </li>
       </ul>
      </div>  
      <div class="right-div">
        <p>Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
       </p>
      </div>
      <div class="right-div">
        <p>Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
       </p>
      </div>
      <div class="right-div">
        <p>Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
       </p>
      </div>
    </div>

1. Что вы пробовали до сих пор? Любая попытка отображения кода?

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

Ответ №1:

Я немного изменил ваш первый пример кода, который использует float .
Хитрость заключается в добавлении псевдоэлемента в правый div. Псевдоэлемент имеет ширину 200 пикселей и выталкивает содержимое вниз, когда места недостаточно:

 #wrapper {
  border: 1px solid green;
}

#left-div {
  float: left;
  border: 1px solid blue;
}

#right-div {
  border: 1px solid red;
}

#right-div:before {
  content: '';
  display: inline-block;
  width: 200px;
  height: 0;
}

ul {
  list-style-type: none;
  padding: 0;
  margin-right: 15px;
}

 <div id="wrapper">
  <div id="left-div">
    <ul>
      <li><img src="https://i.imgur.com/2YUEcKS.png" />
      </li>
      <li><img src="https://i.imgur.com/2YUEcKS.png" />
      </li>
    </ul>
  </div>
  <div id="right-div">
    <p>Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
      Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
      Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
      Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
      Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
      Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
      Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
      Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
      Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
      Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
      Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
      Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
      Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
    </p>
  </div>
</div>

Ответ №2:

Я предлагаю вам попробовать использовать медиа-запросы для этого. Вы можете настроить свою оболочку, чтобы изменить ее правильность гибкого направления на «столбец» на меньших экранах;

следуйте этому примеру:

HTML:

 <div class="parent">
    <div class="images">Images</div>
    <div class="text">Text Content</div>
</div>

Для CSS:

 .parent {
    display: flex;
}

.images, .text {
    flex-grow: 1;
    width: 100%;
}

@media (max-width: 768px) {
    .parent {
        flex-direction: column;
    }  
}

1. Это приближает меня к тому, что я хочу, но когда flex-direction установлено значение row , текст не использует всю ширину страницы под изображениями. Столбец изображений занимает всю высоту страницы. Есть способ это исправить?

Метки: Вертикально выровненные изображения перемещающиеся влево и текст справа который переносится если места недостаточно?