CSS - плавающие два деления рядом друг с другом, вместо этого они идут под друг друга

Question

Я пытаюсь расположить два div рядом с eachother и помнить о мобильных посетителях.

Проблема: вместо того, чтобы плавать рядом с eachother, когда в div используется много текста, это идет внизу.

Вот пример:

.codeblock {
     width:500px;
}
.left{
     float: left;
}

<div class="codeblock">
     <img src="https://placehold.it/307x322" class="left" style="width:125px">
     <div class="left">
           <h3>Some title</h3>
           <p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
     </div>
</div>

Почему это происходит?Есть ли решение без использования фиксированных значений (исключая ширину стиля изображения)?

Answer 1

Другой вариант - использовать flexbox вместо float.Это будет немного больше работы, но это новая функция и всегда хорошо пробовать новые вещи.

https://css -tricks.com / snippets / css / a-guide-to-flexbox /

ОБНОВЛЕНИЕ

Как это: нет класса.Вы сообщаете основному классу, что это flexbox, и у его сына будет отступ для их заполнения.

.codeblock {
  display: flex;
  width:500px;
}
.codeblock > * {
  padding: 0 10px;
}

<div class="codeblock">
     <img src="https://placehold.it/307x322">
     <div >
           <h3>Some title</h3>
           <p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
     </div>
</div>

Answer 2

Что касается мобильных пользователей, я бы сделал это так с flex-wrap и минимальными значениями для контента

.codeblock {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width:500px;
}

.codeblock>img {
  flex: 0 0 125px;
  width: 125px;
  height: auto;
  margin-right: 20px;
}

.codeblock>div {
  flex: 1 1 200px;
  min-width: 200px;
}

<div class="codeblock">
  <img src="https://placehold.it/307x322">
  <div>
    <h3>Some title</h3>
    <p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
  </div>
</div>

Answer 3

Float только изображение

.codeblock {
     width:500px;
}
.left{
     float: left;
     margin-right:10px;
}

<div class="codeblock">
     <img src="https://placehold.it/307x322" class="left" style="width:125px">
     <div >
           <h3>Some title</h3>
           <p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
     </div>
</div>