HTML+CSS разметка блоков с обтеканием текста.

Dmitry V

как сделать такую разметку? При условии, что если текст длинный, блок автоматически расширялся, и текст оказывался под левым и правым блоком. А они в свою очередь оставались фиксированными.

2 ответа

Dmitry V

.leftimg {
  float: left;
  background: red;
  width: 25%;
  height: 100px;
}

.rightimg {
  float: right;
  background: red;
  width: 25%;
  height: 100px;
}
<p>
  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. 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.</p>


Dmitry V

Добрый день! Так?

.html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

p {
  padding: 0 5px;
  text-align: center;
}

.left,
.left_fixed {
  display: block;
  float: left;
  width: 100px;
  height: 100px;
  background: blue;
}

.right,
.right_fixed {
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  background: green;
}

.left {
  margin-right: 5px;
}

.right {
  margin-left: 5px;
}

.left_fixed,
.right_fixed {
  position: fixed;
  top: 0;
}

.left_fixed {
  left: 0;
}

.right_fixed {
  right: 0;
}
<div class="container">
  
  
  
  
  <div class="center">
    <p>Говорили, что на набережной появилось новое лицо: дама с собачкой. Дмитрий Дмитрич Гуров, проживший в Ялте уже две недели и привыкший тут, тоже стал интересоваться новыми лицами. Сидя в павильоне у Верне, он видел, как по набережной прошла молодая
      дама, невысокого роста блондинка, в берете; за нею бежал белый шпиц.</p>
    <p>И потом он встречал ее в городском саду и на сквере, по нескольку раз в день. Она гуляла одна, все в том же берете, с белым шпицем; никто не знал, кто она, и называли ее просто так: дама с собачкой.</p>
    <p>"Если она здесь без мужа и без знакомых, - соображал Гуров, - то было бы не лишнее познакомиться с ней".</p>
    <p>Ему не было еще сорока, но у него была уже дочь двенадцати лет и два сына гимназиста. Его женили рано, когда он был еще студентом второго курса, и теперь жена казалась в полтора раза старше его. Это была женщина высокая, с темными бровями, прямая,
      важная, солидная и, как она сама себя называла, мыслящая. Она много читала, не писала в письмах ъ, называла мужа не Дмитрием, а Димитрием, а он втайне считал ее недалекой, узкой, неизящной, боялся ее и не любил бывать дома. Изменять ей он начал
      уже давно, изменял часто и, вероятно, поэтому о женщинах отзывался почти всегда дурно, и когда в его присутствии говорили о них, то он называл их так:</p>
    <p>Ему казалось, что он достаточно научен горьким опытом, чтобы называть их как угодно, но все же без "низшей расы" он не мог бы прожить и двух дней. В обществе мужчин ему было скучно, не по себе, с ними он был неразговорчив, холоден, но когда находился
      среди женщин, то чувствовал себя свободно и знал, о чем говорить с ними и как держать себя; и даже молчать с ними ему было легко. В его наружности, в характере, во всей его натуре было что-то привлекательное, неуловимое, что располагало к нему женщин,
      манило их; он знал об этом, и самого его тоже какая-то сила влекла к ним</p>
  </div>
</div>

licensed under cc by-sa 3.0 with attribution.