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

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>