1

Предположим есть код вот такого плана http://jsfiddle.net/h0czgwgu/

.left {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  float: left;
  background-color: white;
}

.content {
  width: 100%;
  height: 10px;
  margin: 3px;
  border: 1px solid black;
  background-color: green;
}
<div class="left"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>

Как заставить блоки content обтекать блок left, а не пролазить под ним?

1
  • А зачем? Что именно вы пытаетесь сделать? Имейте в виду, что текст в блоке может вести себя по другому.
    – Alexey Ten
    Commented 14 мар. 2017 в 16:40

1 ответ 1

4

Убрать ширину, добавить overflow: hidden и перетащить margin для края плавающему:

.left {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  float: left;
  background-color: white;
  margin-right: 3px;
}

.content {
  height: 10px;
  margin: 3px 0;
  border: 1px solid black;
  background-color: green;
  overflow: hidden;
}
<div class="left"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>

3
  • Спасибо тебе, огромнейшее. Я почти сутки костыли придумывал... а все оказалось так просто.
    – Kodek
    Commented 14 мар. 2017 в 16:39
  • @Kodek, если всё получилось, стоит принять ответ нажатием на галочку слева от него.
    – Qwertiy
    Commented 14 мар. 2017 в 16:41
  • Я принял. Не давало сразу принять по причине таймаута в 5 минут.
    – Kodek
    Commented 14 мар. 2017 в 16:47

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.