Является ли поле в CSS правильным способом очистки пространства под изображением? - PullRequest
Новая
       35

Является ли поле в CSS правильным способом очистки пространства под изображением?

0 голосов
/ 18 октября 2018

Привет, @ все, у меня есть изображение на левой стороне и текст на правой стороне контейнера.Моя цель - чтобы изображение оставалось слева и ничего не появлялось под ним.Это может быть сделано с помощью начальной загрузки, но с чистым CSS, является ли отступ под img правильным способом сохранить текст с правой стороны?Проблема в том, что поле должно быть скорректировано по длине абзаца.Как лучше это сделать?

HTML 

  <div class="container test">
        <img src="https://images.pexels.com/photos/34950/pexels- 
             photo.jpg?cs=srgb&dl=abandoned-forest-hd-wallpaper-34950.jpg&fm=jpg"
             alt="">
        <h3>hola</h3>
        <p>I am a long paragraph, a very long one Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.</p>
    </div>

CSS 

.test {
      width: 300px;

      img {
        width: 100px;
        height: 100px;
        float: left;
        margin-bottom: 10rem;
      }
    }

Вот как это выглядит: Снимок экрана с полем

Ответы [ 2 ]

0 голосов
/ 18 октября 2018

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

.test {
  width: 300px;
  display: flex;
}

img {
  width: 100px;
  height: 100px;
}
<div class="container test">
  <img src="https://via.placeholder.com/100x100" alt="">
  <!-- Container added for text elements -->
  <div class="text-container">
    <h3>hola</h3>
    <p>I am a long paragraph, a very long one Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.</p>
  </div>
</div>
0 голосов
/ 18 октября 2018

Оберните текстовое содержимое в его собственный div и плавайте , что . 

.test {
  width: 300px;
}

img {
  max-width: 100px;
  float: left;
}

.wrap {
  float: left;
  width: 200px;
}
<div class="container test">
  <img src="http://www.fillmurray.com/460/300" alt="">
  <div class="wrap">
    <h3>hola</h3>
    <p>I am a long paragraph, a very long one Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.</p>
  </div>
</div>
...