html - CSS 布局问题 - 垂直对齐 : Bottom; and Scaling issues

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

看看你能用它做什么。我把它弄乱了一点。我已经非常接近了。

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