CSS - Как выровнять изображение слева внизу для текстового блока? - PullRequest
Новая
       15

CSS - Как выровнять изображение слева внизу для текстового блока?

7 голосов
/ 31 мая 2010

alt text

Как это изображение?

Ответы [ 5 ]

3 голосов
/ 31 мая 2010

Это невозможно в HTML / CSS.

Абсолютное позиционирование позволяет размещать подобное, но вы должны следить за тем, чтобы другой контент не конфликтовал с ним - текст не циркулировал.

Механизм поплавка позволяет вам плавать, но позволяет размещать поплавок только на горизонтальном уровне его «якоря» - без позиционирования, но влево / вправо.

0 голосов
/ 12 июня 2015

Теперь это возможно, используя CSS Shapes с известной высотой контейнера или с использованием js.

Вам нужен плавающий контейнер изображения с высотой 100%: 

height: 100%; /* either js or known parent height */
float: left;
width: 100px;

Фактическая форма поплавка - это выровненный снизу прямоугольник, определяемый shape-outside свойство: 

shape-outside: polygon(
   0 100%,                  /* bottom left point */
   100px 100%,              /* 100px to the right */
   100px calc(100% - 100px) /* 100px above the bottom */
);


var text = document.querySelector('.text');

// setting container height + some extra space to compensate for the "image"
text.style.height = (text.clientHeight + 20) + 'px';
.text {
  columns: 2;
  /* also works with columns! */
  -webkit-columns: 2;
  width: 600px;
}
.text-known-height {
  height: 230px;
  width: 400px;
}
.text p {
  margin-bottom: 10px;
  margin-top: 0;
}
.float-bottom {
  background: rgba(0, 0, 0, 0.1);
  width: 100px;
  height: 100%;
  position: relative;
}
.float-right {
  float: right;
  shape-outside: polygon(100% 100%,
  /* bottom right point */
  calc(100% - 100px) 100%,
  /* 100px from right edge */
  calc(100% - 100px) calc(100% - 100px));
}
.float-right .image {
  right: 0;
  left: auto;
}
.float-left {
  float: left;
  shape-outside: polygon(0 100%,
  /* bottom left point */
  100px 100%,
  /* 100px to the right */
  100px calc(100% - 100px)
  /* point 100px above the bottom */
  );
}
.image {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: white;
  background: #7233B6;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>

  <h3>Unknown height container</h3>
  <div class="text">
    <div class="float-bottom float-left">
      <div class="image">image</div>
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec neque lacinia, fermentum neque quis, feugiat erat. Nam et sem aliquam, placerat nulla eu, lobortis enim. Nulla ut semper urna. Sed et diam arcu. Vestibulum ante ipsum primis in faucibus
      orci luctus et ultrices posuere cubilia Curae; Duis sodales, ex a euismod dignissim, magna nulla egestas urna, non fringilla velit lorem ornare turpis. Sed nibh ipsum, iaculis nec mi sed, tincidunt ultrices magna. Nulla posuere orci erat, id fringilla
      magna hendrerit id. Etiam vestibulum arcu feugiat risus lacinia pretium. Donec ut nisi vitae tortor faucibus bibendum eu ac massa. Pellentesque ac magna eget nunc efficitur ultrices nec in ipsum. Praesent interdum elementum turpis.
      <p>
        Sed suscipit nulla eu dapibus dignissim. Vestibulum scelerisque sed turpis eget ultrices. Ut ut pharetra ex. Nam hendrerit magna a varius vehicula. Nunc risus dui, dictum et ex quis, viverra interdum sem. Proin varius sapien ipsum. Maecenas felis purus,
        egestas a massa non, pharetra vulputate tellus. Suspendisse potenti. Sed viverra aliquam iaculis. Quisque non diam sapien. Curabitur semper velit non urna congue, at consectetur turpis finibus.
  </div>

  <h3>Known height</h3>
  <div class="text-known-height">
    <div class="float-bottom float-right">
      <div class="image">image</div>
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec neque lacinia, fermentum neque quis, feugiat erat. Nam et sem aliquam, placerat nulla eu, lobortis enim. Nulla ut semper urna. Sed et diam arcu. Vestibulum ante ipsum primis in faucibus
      orci luctus et ultrices posuere cubilia Curae; Duis sodales, ex a euismod dignissim, magna nulla egestas urna, non fringilla velit lorem ornare turpis. Sed nibh ipsum, iaculis nec mi sed, tincidunt ultrices magna. Nulla posuere orci erat, id fringilla
      magna hendrerit id. Etiam vestibulum arcu feugiat risus lacinia pretium. Donec ut nisi vitae tortor faucibus bibendum eu ac massa.
  </div>

</body>

</html>
0 голосов
/ 31 мая 2010

Возможно, я придумал изображение справа вверху, а не внизу слева, может быть, вы можете обойти это. 

.wrap-box {
    width: 400px;
    text-align: justify;
}

.wrap-box img {
    float: right;
    padding: 0 0 5px 5px;
    height: 80px;
    width: 80px;
}

Коробка: 

<div class="wrap-box"> 
<img src="http://farm5.static.flickr.com/4020/4656328142_faab111247.jpg"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
0 голосов
/ 31 мая 2010

Добавить следующий стиль к изображению 

float: left; 
padding-right:10px;
padding-top:10px;
position:absolute,
bottom: 10px;
0 голосов
/ 31 мая 2010

Вы бы использовали: 

float: left; 
position: absolute;
bottom: 0px;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...