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

I have the following html where I want the left div to show an image about 20% and the second div to contain text and take up the rest of the width. The problem I have is the second div gets pushed to the button when the image is added:

我有以下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>

This example as you can see pushes the text to the bottom. But if I remove the image then all is well:

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

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

If I float the image to the left, it behaves properly but the table is not taking the whole width of the browser now

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

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

Here is my demo

这是我的演示

I've tried different things but nothing seems to work. So if anyone can give me any tips, it would be appreciated.

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

1 个解决方案

#1

You forget to add width:100% on the bottom div.

你忘记在底部div添加宽度：100％。

See this JSFiddle.

看到这个JSFiddle。

It should be like this:

它应该是这样的：

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

1 个解决方案

#1

更多相关文章

随机推荐