Question

.about有bottom: 0和width: 100%，为什么它不在.about的底部，为什么它没有100％呢？

Css本身就在这里

*{
  box-sizing: border-box;
}
.here {
  border: 1px solid black;
  overflow: hidden;
}
.hotel-img {
    position: relative; 
    width: 30%;
    float: left;
}
.hotel-rating {
    position: absolute;
    bottom: 0;
}
.about {
    float: left;
    width: 70%;
    position: relative;   
}
.about a {
    position: absolute;
    bottom: 0;
    width: 100%;
}

Html代码在这里

  <div class="here">
        <div class="hotel-img">
            <img src="imglink" alt="">
            <div class="hotel-rating">
               XXXX
            </div>
        </div>
        <div class="about">
            <span>
                <span class="name">Hotel Imperial</span>
                <span class="address">5th Ave</span>
            </span>
            <div class="benefits">
                <span>WiFi</span>
                <span>Pool</span>
                <span>Dinner</span>
            </div>
            <a href="index.php">Buy night from $99 per night</a>
        </div>
    </div>

完整代码位于codepen http://codepen.io/anon/pen/vNrvZm

Answer 1

从position:relative;移除.about并将其添加到.here，如此;

.here {
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}

.about {
    float: left;
    width: 70%;
    padding-left: 2%;
}

Answer 2

如果要在<a href="index.php">Buy night from $99 per night</a> div的底部显示{@ 1}}，请务必清楚显示.here的位置，然后按@Sean Murrin提供的答案。但是，如果要显示在结束福利div之后，您必须在代码中创建.about {position:relative}。您当前的代码是重叠的，因为position: absolute; bottom:0;表示它将在结束.benefits div之后开始，因为div也将在此处结束。如果你提供大约div的高度，那么大约div不会在这里结束。你可以提供填充

.about {
    float: left;
    width: 70%;
    position: relative; 
    padding-bottom:30px; //should be greater then the height of `.about a` so it will not overlap.
}

或

.about {
        float: left;
        width: 70%;
        position: relative; 
        height: something px; //define height of about div
    }

Answer 3

.about的任何祖先都没有明确的高度（我怀疑你真正的意思是.about .about a的孩子的锚<body> ）。

所以我设置了一个稳定且反应灵敏的高度<body>。的 height: 100vh

将 100vw 添加到height: 100%宽度（对于手头的问题，没有必要）。

将.here添加到.about和.about a。现在，包含.about的每个元素都具有视口的高度。

顺便说一下，我注意到.about a宽度为70％，图像为30％，我认为这是你想要的。遗憾的是，<a>看起来很奇怪，因为它不会覆盖视口的整个宽度，并且它不在页面中居中。我做了两个演示。

我在第二个演示中更改了标记。

.here已移至<footer>，然后换入<footer>

提供<a>所有position: fixed个属性和display: inline-table

我还为标题，地址和图片设置了.about a，以便他们能够发挥出色。

以下是前面提到的2个演示的链接。

此 DEMO 是您要求的修正。

此 DEMO 与之前的演示相同，且chat1 nickname: user1 status: admin nickname: user2 status: none nickname: user3 status: none已更正。

将绝对意外定位在相对内部

3 个答案: