Переполнение текста с опцией плавающего изображения - PullRequest
Новая
       4

Переполнение текста с опцией плавающего изображения

0 голосов
/ 24 ноября 2011

Ну, я попытался поместить изображение слева, с опцией float, и текст не должен отображаться ниже первого изображения, до нижней границы.Как мне этого добиться?(Я делаю текст длинным, потому что мне нужно учитывать разные разрешения разных компьютерных экранов, он может обернуться)

И еще одна проблема, второе изображение, я хотел, чтобы его left side было выровнено с right side из первого, это возможно?

HTML здесь: 

<html>
    <head>
        <title> This is an demo </title>
        <style>
            .left { 
                float: left; 
            }
            .content {
                clear: both;
                border-color: #666666;
                border-bottom: 3px solid;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <img class="left" src="61add42atw1dnf1k4h4qzj.jpg" />
            <p> ThiThis is a not so long parThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphagraphs is a not so long parThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphagraph</p>
            <img src="61ab8006jw1dnfas8bvj9j.jpg" />
        </div>
    </body>
</html>

enter image description here

Ответы [ 3 ]

1 голос
/ 24 ноября 2011

Может быть, это соответствует вашим потребностям

http://jsfiddle.net/uqJHf/246/

Важной частью является overflow:hidden

Редактировать 

.content .image {
  float: left;
}

.content .image-aside {
  padding-left: 10px;
  overflow: hidden;
  clear: none;
}

.content .image-aside .image {
  margin-left: -10px;
}

.content {
  border-color: #666666;
  border-bottom: 3px solid;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}
<div class="content clearfix">
  <div class="image">
    <img class="left" src="https://lorempixel.com/200/200/sports/1" width="200" height="200" />
  </div>
  <div class="image-aside">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, eius nobis natus dolores, suscipit minus maxime ullam fugit sequi, repellat rem? Distinctio placeat minus dignissimos, fugiat magnam magni totam vero nihil blanditiis fugit sapiente
      perspiciatis natus iure possimus odio impedit ex, ullam tenetur delectus voluptas? Quasi sed, ipsam vitae hic quam non pariatur ad labore accusamus at vero laudantium suscipit voluptatum, quod eveniet vel temporibus, doloremque voluptate veniam?
      Eos nobis dolore eligendi fuga id recusandae iure adipisci temporibus vero nemo harum ab obcaecati architecto, dolores dolorem, esse excepturi saepe quas voluptate beatae totam cum minus consequuntur. Perspiciatis debitis quasi explicabo, quo voluptatem
      omnis aliquam porro dolores nesciunt tenetur accusantium laborum sunt earum ducimus nostrum facilis mollitia vero, reiciendis molestias, similique molestiae impedit possimus? Dicta commodi perferendis vero alias autem fugit obcaecati, laborum ut?
      Dignissimos, vitae itaque nulla vel repellendus labore praesentium! Nostrum totam quam dignissimos unde eveniet architecto fuga ab aut repellat tenetur voluptates eum sint at modi saepe optio asperiores molestias, illo nobis odio nesciunt impedit
      ea. Quia labore, provident quo cumque nisi repudiandae repellendus odio voluptatem voluptatum ipsum molestias possimus sapiente eos iste repellat fugit minus atque harum necessitatibus. Tempora ipsa maiores corporis esse molestiae. Quisquam, animi
      aliquid.</p>
    <div class="image">
      <img class="left" src="https://lorempixel.com/200/200/sports/2" width="200" height="200" />
    </div>
  </div>
</div>
1 голос
/ 24 ноября 2011

Вы можете включить изображения в div с height:100% и шириной, какой вы хотите: pencentage или pixel. и текст в другом div, также с плавающей точкой слева

0 голосов
/ 24 ноября 2011

Вы говорите, что хотите, чтобы текст был перенесен, но если он оборачивается под изображением, его следует обрезать?

В этом случае поместите изображение и текст в DIV с высотойизображения и установите для параметра overflow значение none.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...