2

.txt {
  width: auto;
}

.img {
  float: left;
  width: 40%;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="txt">
    <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia
      voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius
      modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit,
      qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?</p>
  </div>
  <div class="img">
    <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.</p>
  </div>
</body>

</html>

Ситуация такова. Есть два блока, в разметке один расположен сначала (пусть будет блок А), второй (блок В) ниже. У второго (В) установлено float: left, для того, чтобы он на небольших экранах уходил вниз. Но, на стандартных мониторах, его должен обтекать первый блок (А).

<div class="A"></div>

<div class="B"></div>

.A { width: auto; }

.B { width: 40%; float: left; }

Если, блок с float: left (В) расположить сначала, то его нормально обтекает другой блок (А), но тогда, он не будет уходить вниз страницы.

У блока, который нужно обтекать (В) ширина 40%, у того который должен обтекать (А) — ширина не задана. Высота у обоих произвольная.

Как без использования JS это организовать?

1
  • Добавьте воспроизводимый пример кода
    – user212578
    26 окт 2017 в 6:49

3 ответа 3

1

Просто так, полагаясь на float это не зделать. Медиа выражение и ширину для первого блока придется задать. В чем проблема если мы знаем ширину второго?

.img {
  width: 40%;
  background: red;
  float: left;
}
.txt {
  width: auto;
}
@media all and (max-width: 400px) {
  .wrapp {
    display: flex;
    flex-direction: column-reverse;
  }
  .img {
    width: 100%;
  }
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
     <div class="wrapp"><div class="img">
     <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.</p>
  </div> 
<div class="txt">
    <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia
      voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius
      modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit,
      qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?</p>
  </div>
    </div>

</body>

</html>

4
  • Но тогда на мониторах не будет txt обтекать как картинку img. В этом и проблема. Нужно, чтобы img был слева. А медиавыражения, конечно задано :)
    – Linne
    26 окт 2017 в 7:43
  • Если правильно поняла, что вам нужно. Img в разметке пришлось поставить выше для обтекаемости и работы float. На маленьких экранах ширина в 100% и позиционируем флексами. Можно было бы поиграть с position, но нет ширины.
    – Halyna
    26 окт 2017 в 8:23
  • codepen.io/WhiteSeaSeal/pen/pWMQVw?editors=1100 - тут поиграйте шириной.
    – Halyna
    26 окт 2017 в 8:26
  • Да! Это как раз то, что нужно, причём в идеале! Огромное Вам спасибо!
    – Linne
    26 окт 2017 в 8:41
0

Во flex можно упаковать

.flex {display:flex; flex-direction:row-reverse}

@media all and (max-width: 400px) {
   .flex {display:block}
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
<div class="flex">
  <div class="txt">
    <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia
      voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius
      modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit,
      qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?</p>
  </div>
  <div class="img">
    <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.</p>
  </div>
</div>
</body>

</html>

4
  • К сожалению, txt по-прежнему не обтекает img.
    – Linne
    26 окт 2017 в 8:00
  • Добавил media запрос для маленьких экранов. @Linne что вы понимаете под словом «обтекает»?
    – Talleyran
    26 окт 2017 в 8:07
  • Ну, как текст обтекает картинку расположенную например, слева, т. е., текст обтекает иллюстрацию справа, а когда она заканчивается (её высота), идёт дальше на всю 100% ширину. Вот таким образом :)
    – Linne
    26 окт 2017 в 8:11
  • @Linne тогда у вас картинка внутри p лежать должна, иначе так не получится.
    – Talleyran
    26 окт 2017 в 8:17
0

 
   .image {
    float:left;
    margin: 7px 7px 7px 0; 
   }
   .image2  {
    float: right; 
    margin: 7px 0 7px 7px;
   }
 
  <p><img src="http://333v.ru/uploads/00/000a7db0d4c688263a3e8d09e1f5fa93.jpg" width="150" height="100" class="image">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque blanditiis molestias rem excepturi commodi molestiae laboriosam tenetur sed incidunt laudantium et cupiditate, iure illum ipsa voluptates, architecto ut alias beatae tempora modi neque. Aut temporibus, mollitia quasi nam accusamus iste, nostrum. Voluptatem, illum quisquam tempora dolores provident. Odio sed debitis impedit praesentium dolore ipsam et delectus cupiditate itaque. Nostrum, voluptatibus, asperiores! Eveniet veniam sed accusamus voluptatum, voluptate ratione maxime, repudiandae tenetur tempora maiores perspiciatis recusandae! Esse similique quam harum eaque distinctio est, aliquam eligendi quaerat odio maiores impedit itaque, sit libero voluptatem. Nostrum, nulla maxime incidunt at vitae, veritatis enim ipsum, illum explicabo corrupti sed alias quo rem dicta possimus voluptate ex. Quasi earum temporibus totam, a molestias, neque soluta porro eligendi provident est, culpa in ducimus quae inventore ipsa. Magni velit qui libero mollitia, blanditiis eveniet beatae, quisquam doloremque quis molestiae, dolorem cum deserunt, soluta tempore neque incidunt architecto facilis? Autem expedita at ea animi cum laborum nesciunt porro ipsam accusantium. Voluptatibus quidem modi provident, tenetur velit tempora error ipsam aliquam inventore, nulla vel odit qui sequi adipisci laboriosam. Explicabo soluta adipisci, laborum obcaecati, eos id unde veniam, voluptates aliquam debitis quos repellat sint quia accusantium odit ab enim sunt consectetur! Tempore sequi nesciunt eligendi placeat quas distinctio rerum dolor facilis illo! Officia voluptates, quia rerum repudiandae incidunt eligendi sunt iusto deleniti in, similique eum nihil labore architecto sit! Distinctio, eveniet. Illo eius saepe magnam modi laborum pariatur adipisci reprehenderit molestias, quae id, in totam a quisquam. Saepe corporis minus iusto delectus magni. Ducimus, modi architecto reprehenderit eaque sed, vitae eius assumenda ipsam expedita corporis enim blanditiis dolor eveniet sit molestias earum voluptatem ratione animi suscipit in placeat cum, facere sunt. Reiciendis modi vel cum fugiat, nam facilis quos repellat. Quidem expedita, harum amet hic quia fuga quam, aspernatur.</p>
     
  <p><img src="http://333v.ru/uploads/00/000a7db0d4c688263a3e8d09e1f5fa93.jpg"  width="150" height="100" class="image2">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque blanditiis molestias rem excepturi commodi molestiae laboriosam tenetur sed incidunt laudantium et cupiditate, iure illum ipsa voluptates, architecto ut alias beatae tempora modi neque. Aut temporibus, mollitia quasi nam accusamus iste, nostrum. Voluptatem, illum quisquam tempora dolores provident. Odio sed debitis impedit praesentium dolore ipsam et delectus cupiditate itaque. Nostrum, voluptatibus, asperiores! Eveniet veniam sed accusamus voluptatum, voluptate ratione maxime, repudiandae tenetur tempora maiores perspiciatis recusandae! Esse similique quam harum eaque distinctio est, aliquam eligendi quaerat odio maiores impedit itaque, sit libero voluptatem. Nostrum, nulla maxime incidunt at vitae, veritatis enim ipsum, illum explicabo corrupti sed alias quo rem dicta possimus voluptate ex. Quasi earum temporibus totam, a molestias, neque soluta porro eligendi provident est, culpa in ducimus quae inventore ipsa. Magni velit qui libero mollitia, blanditiis eveniet beatae, quisquam doloremque quis molestiae, dolorem cum deserunt, soluta tempore neque incidunt architecto facilis? Autem expedita at ea animi cum laborum nesciunt porro ipsam accusantium. Voluptatibus quidem modi provident, tenetur velit tempora error ipsam aliquam inventore, nulla vel odit qui sequi adipisci laboriosam. Explicabo soluta adipisci, laborum obcaecati, eos id unde veniam, voluptates aliquam debitis quos repellat sint quia accusantium odit ab enim sunt consectetur! Tempore sequi nesciunt eligendi placeat quas distinctio rerum dolor facilis illo! Officia voluptates, quia rerum repudiandae incidunt eligendi sunt iusto deleniti in, similique eum nihil labore architecto sit! Distinctio, eveniet. Illo eius saepe magnam modi laborum pariatur adipisci reprehenderit molestias, quae id, in totam a quisquam. Saepe corporis minus iusto delectus magni. Ducimus, modi architecto reprehenderit eaque sed, vitae eius assumenda ipsam expedita corporis enim blanditiis dolor eveniet sit molestias earum voluptatem ratione animi suscipit in placeat cum, facere sunt. Reiciendis modi vel cum fugiat, nam facilis quos repellat. Quidem expedita, harum amet hic quia fuga quam, aspernatur.</p>

Ваш ответ

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

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