Question

我正在尝试为我的设计添加一个补充角落，无论该框中内容的大小如何，都应该在内容框下面。

正如你所看到的那样，角落适合第二个盒子，但不适合第一个盒子。

HTML代码：

<div class="title_container">
        <div class="hook_bottom_left"></div>
        <div class="title ">
        <p >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.</p></div>
    </div>


<div class="title_container">
        <div class="hook_bottom_left"></div>
        <div class="title ">
        <p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
           </div>
    </div>

这里有

CSS：

.title_container {position: relative; min-height: 112px; padding-top: 25px; padding-bottom: 5px; display:block;}
.title { position: absolute; background:url("img/hash_light.png");  border: 1px solid #c8c8c8; padding: 15px; z-index: 10;  
  width: -moz-calc(100% - 16px);
  width: -webkit-calc(100% - 16px);
  width: -o-calc(100% - 16px);
  width: calc(100% - 16px);
  margin-top: 8px;
  margin-left: 8px;
  overflow: hidden; }

.hook_bottom_left{position: absolute; left:0; bottom:17px; border-left: 8px solid #000; border-bottom:8px solid #000; width: 40px;height: 40px;}

Answer 1

查看this JsFiddle

我带走了min-height，制作了文字position:relative;并将其设为bottom:0。

如果min-height小于122px，那么bottom:0;就不会让钩子掉到底部，这就是为什么它会悬挂在一起。在position:absolute上方的下方。

文字是position:relative，这意味着它们没有占用任何宽度（导致各种重叠错误）。一旦它们<div class="hook_bottom_left"></div>，钩子就可以达到正确的高度。

JsFiddle with :before element

这个拿走了

:before

而是插入＆＃39; hook＆＃39;在.title_container上使用div。

这意味着您不再需要使用.title_container作为挂钩，{{1}}类会自动使用它。

Css位置角绝对左下角

1 个答案: