html - 并排 float 两个 div 时，eft col 内容的额外间距

Question

我并排 float 两个 div，我的问题是左边的内容在顶部有很大的空间。否则高度调整得很好。有没有办法让内容水平对齐，消除巨大的空间？请参阅提供的链接 http://jsfiddle.net/darlene1624/zey0macx/ .

<div class="row">
    <div class="col">
        <div class="event">
            <img src="http://ima.gs/800x400.png" alt="event 1"  />
                </div>
    </div>

    <div class="col">
        <div class="eventdesc">
                            <div class="eventtitle">
                                <h2><a href="#">Carnival Party</a></h2>     
                             </div><p><strong>Where: </strong>TBA<br>
                            <strong>When: </strong>19/09/2014<br>
                            <strong>End Date: </strong>18/12/2014<br>
                            <strong>Time: </strong>7:00 pm<br>
                            <strong>Contact: </strong><br></p><br>

                            <div class="readmore">
                            <a href="#">Read More</a>
                            </div>

    </div>


.row {
    display: table;
}

.col {
    display: table-cell;
    width: 50%;

    padding: 1em;

 border-bottom: 1px solid #F5F8F9;
}

.event img{
width:100%;
 }

 .eventdesc{

    padding-left: 15px;
    padding-right: 15px;


 }

 .readmore {
 text-align:right;
 color: #FBE321;
 }


 .readmore a{

 color: #FBE321;
 }

谢谢，D.

Answer 1

你需要设置:

.col {
    vertical-align: top;
}
h2 {
    margin-top: 0;
    line-height: 1em;
}

Fiddle