第二个表格单元格未与顶部对齐

Question

我有以下html，我希望左边的div显示大约20％的图像，第二个div包含文本并占据宽度的其余部分。我遇到的问题是在添加图像时第二个div被推到按钮：

<div style="display:table; width: 100%; border: solid 1px blue;">

    <div style="display: table-cell; width: 20%;  max-height: 100%; border: solid 1px green; ">
        <img src="http://lorempixel.com/400/200/" style=" width: 100%; height: 100%;  border: 0;" />            
    </div>
    <div style="dislay: table-cell; border: solid 1px red; vertical-align: top; top: 0; left: 0; ">
        This is the area of the description
    </div>
</div>

您可以看到此示例将文本推送到底部。但如果我删除图像，那么一切都很好：

<div style="display:table; width: 100%; border: solid 1px blue;">

    <div style="display: table-cell; width: 20%;  max-height: 100%; border: solid 1px green; ">
        No Image        
    </div>
    <div style="dislay: table-cell; border: solid 1px red; vertical-align: top; top: 0; left: 0; ">
        This is the area of the description
    </div>
</div>     

如果我将图像浮动到左侧，它的行为正常，但表格现在不占用浏览器的整个宽度

<div style="display:table; border: solid 1px blue;">

    <div style="display: table-cell; width: 20%;  max-height: 100%; border: solid 1px green; float: left; ">
        <img src="http://lorempixel.com/400/200/" style=" width: 100%; height: 100%;  border: 0;" />            
    </div>
    <div style="dislay: table-cell; border: solid 1px red; vertical-align: top; top: 0; left: 0; ">
        This is the area of the description
    </div>
</div>  

这是我的demo

我尝试了不同的东西，但似乎没有任何效果。所以，如果有人能给我任何提示，我们将不胜感激。

Answer 1

您忘记在底部div添加width:100%。

请参阅此JSFiddle。

应该是这样的：

<div style="display:table; width: 100%; border: solid 1px blue;">

    <div style="display: table-cell; width: 20%;  max-height: 100%; border: solid 1px green; float: left; ">
            <img src="http://lorempixel.com/400/200/" style=" width: 100%; height: 100%;  border: 0;" />            
    </div>
    <div style="dislay: table-cell; border: solid 1px red; vertical-align: top; top: 0; left: 0; ">
        This is the area of the description
    </div>
</div>