Question

我们有两个盒子与附近的什么相关，以及制作完美的别墅假期。我们希望左侧（附近的内容）框与右侧（Crafting the Perfect Villa Vacation）框非常相似，因为左侧框应在与灰色容器顶部对齐时进行缩放。我们已经尝试了很多方法，并且很快就会出现！所以基本上，左框应该能够在垂直对齐底部时进行缩放，就像右框一样。

这是我们的代码......

HTML：

<div id="whats-nearby">
<h1>What's Nearby</h1>
<div class="orange-triangle-180"><img src="images/orange-triangle.png"/></div>
<img src="images/whats-nearby.jpg"/>                
</div>
<div id="crafting-villa-vacation">
<h1>Crafting the perfect villa vacation</h1>
<div class="orange-triangle-180"><img src="images/orange-triangle.png"/></div>
<img src="images/crafting-villa-vacation.jpg"/>
<h3 class="share-property">Share This Property</h3>         
</div>

CSS：

  #crafting-villa-vacation {
    float: right;
    width: 52%;
    display: table;
    margin-right: 3%;
    margin-top: 200px;
    margin-bottom: -119px;
    }
    #crafting-villa-vacation .orange-triangle-180 img{
    position: absolute;
    top: -18px;
    right: 10px;
    width: 35px;
    }
    #crafting-villa-vacation img {
    width: 100%;
    float: left;
    display: table-cell;
    vertical-align: bottom;
    }
    #whats-nearby {
    position: absolute;
    bottom: 0;
    top: 584px;
    left: 60px;
    z-index: 1;
    width: 27%;
    }
    #whats-nearby img {
    width: 100%;
    display: table-cell;
    }
    #whats-nearby .orange-triangle-180 img{
    width: 35px;
    position: relative;
    bottom: 18px;
    right: 5px;
    margin-right: 420px;
    }

Answer 1

这对我有用。看看这是否会有所帮助。它与向右浮动的方框非常相似，但它左侧浮动的位置略有不同。

#whats-nearby {
    float: left;
    width: 27%;
    display: table;
    margin-left: 60px;
    margin-top: 73px;
    margin-bottom: -119px;
}

Answer 2

看看你能做些什么。我把它搞砸了一下。我非常接近。

HTML：

<div id="whats-nearby">
    <h1>What's Nearby</h1>
    <div class="orange-triangle-180"><img src="images/orange-triangle.png"></div>
    <img src="images/whats-nearby.jpg">
    <h3 class="share-property"></h3>                
</div>

CSS：

#crafting-villa-vacation {
    float: right;
    width: 52%;
    display: table;
    margin-right: 3%;
    margin-top: 200px;
    margin-bottom: -119px;
}
#crafting-villa-vacation h1 {
    color: #f26649;
    text-transform: uppercase;
    font-family: 'Minerva', serif;
    text-align: left;
    padding-bottom: 10px;
    font-size: 18px;
}
#crafting-villa-vacation .orange-triangle-180 img{
    position: absolute;
    top: -18px;
    right: 10px;
    width: 35px;
}
#crafting-villa-vacation img {
    width: 100%;
    float: left;
    display: table-cell;
    vertical-align: bottom;
}

#whats-nearby {
    float: left;
    width: 27%;
    display: table;
    margin-left: 5%;
    margin-top: 200px;
    margin-bottom: -91px;
}
#whats-nearby h1 {
    color: #f26649;
    text-transform: uppercase;
    font-family: 'Minerva', serif;
    text-align: right;
    padding-bottom: 10px;
    font-size: 18px;
}
#whats-nearby .orange-triangle-180 img{
    position: absolute;
    width: 35px;
}
#whats-nearby img {
    width: 100%;
    float: left;
    display: table-cell;
    vertical-align: bottom;
}
#whats-new h3.share-property {
    background-color: #0073AE;
    text-transform:  uppercase;
    font-size: 15px;
    text-decoration: underline;
    color: #fff;
    width: 200px;
    padding: 5px 10px;
    position: relative;
    top: -28px;
    left: 0;
    font-family: 'Minerva', serif;
    clear: both;
}

CSS布局问题 - 垂直对齐：底部;和缩放问题

2 个答案: