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

199
23 марта 2018, 11:19

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

Answer 1

.leftimg { 
  float: left; 
  background: red; 
  width: 25%; 
  height: 100px; 
} 
 
.rightimg { 
  float: right; 
  background: red; 
  width: 25%; 
  height: 100px; 
}
<div class="leftimg"></div> 
<div class="rightimg"></div> 
<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>

Answer 2

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

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

READ ALSO
Можно ли подключить шрифт при переводе страницы

Можно ли подключить шрифт при переводе страницы

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

232
iOS странным образом выводит блоки

iOS странным образом выводит блоки

Имеется вот такое поведение: С чем это связано? Почему ios дублирует некоторые блоки, заменяя при этом другие, да еще "пережевывая" подобным...

194
Совет по таблицам MySql

Совет по таблицам MySql

Есть товар у которого 3 размера и соотв3 цены, сейчас всё сделано на JS и при клике на 1 из 3 input[type="radio"] подставляется цена и размер указанные...

223
No module named &#39;pymysql&#39; FLASK в то время, когда он есть

No module named 'pymysql' FLASK в то время, когда он есть

Уже не знаю сколько разбираюсь с этой проблемой

220