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

Question

我们有两个框与“附近的东西”和“打造完美别墅度假”相关联。我们希望左侧（附近有什么）框的行为与右侧（制作完美别墅度假）框非常相似，因为左侧框应该在与灰色容器顶部对齐的同时进行缩放。我们尝试了很多方法，但都失败了！所以基本上，左边的盒子应该能够缩放，同时垂直对齐到底部，就像右边的盒子一样。

这是我们的代码...

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;
}