logo标签列表

CSS - 如何将图像左下角与文本块对齐？

css
8

alt text

这张图片是关于IT技术的吗？

5个回答
3

在HTML/CSS中不可能实现这一点。

绝对定位允许像这样放置，但您应确保其他内容不会与其冲突 - 没有文本流动。

浮动机制可以使文本流动，但仅允许将浮动放置在其“锚点”的水平级别上 - 没有定位但左/右。

0

现在可以使用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>

有趣...但是仅限于你能猜测需要容纳图像的垂直空间的数量。 - user3553031
0

你可以使用：

float: left; 
position: absolute;
bottom: 0px;
1
无法正常工作，因为vertical-align: bottom在无表格结构中没有效果。 - Edward
0
给图片添加以下样式
float: left; 
padding-right:10px;
padding-top:10px;
position:absolute,
bottom: 10px;
1
这样，图片会覆盖在文本上面，这是不期望的。 - Edward
0

可能是可行的，我已经想出了正确的顶部位置图片，而不是底部左侧，也许你可以对此进行调整。

.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>
这不可能通过 HTML / CSS 实现。将其向左浮动，它就在左侧，但无法与段落底部对齐。 - jeroen
嗯，可能吧，但只有左上角和右上角可以工作，所以只能算一半可能性 :P - MacMac
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接