为什么我的DIV身高错了？ [英] Why is my DIV height wrong?

问题描述

大家好，



我用display：table等创建了一个css表格布局，但是当它在浏览器中显示时，单元格的高度/行似乎不正确。



看看这里：

http://jsfiddle.net/ev092xoq/ [ ^ ]



根据我的理解，红色和绿色区域的高度应该与白色区域相同......



有谁可以解释为什么不是这样的？





请注意我不会尝试制作一个3列设计，但白色区域应保留在红色区域内。





问候

Hi everyone,

I have created a css table layout with display:table and so on, but when it shows up in browser the height of the cells/row seems not correct.

Have a look here:
http://jsfiddle.net/ev092xoq/[^]

For my understanding the height of the red and green area should be the same as the white one...

Can anyone explain why thats not the case??


Please be aware that I don't try to make a 3 column design but the white area should remain inside the red area.


Greetings

推荐答案

小提琴更新 [ ^ ]



首先，我希望您删除所有内联样式并添加类使用css。这使得代码更易读，易于维护。



我已经更新了你的小提琴。请检查。

回复查询（如果有的话）。

谢谢。

Fiddle Update[^]

First of all I would like you to remove all the inline styles and add class use css instead. That makes code more readable and easy to maintain.

I have updated the fiddle by you. Please check.
Post back queries if any.
Thanks.

在浏览器解析的某个地方，css会发生奇怪的事情。

我无法解释为什么它正在做它正在做的事情，也许其他人对这个做了一个线索。



但这里是一个使用display获取所需效果的替代方法：inline-block;

Weird stuff is going on in the css somewhere on the browser parsing.
I can not explain why it is doing what it is doing, maybe someone else has a clue on that one.

But here is an alternative method to get your desired effect using display:inline-block;

<div class="init" style="width: 100%; height: 8em; overflow: hidden; background-color: gray;">
    <h3>Using inline-block:</h3>
    <div style="display:inline-block;">
        <div style="display:block;height: 2em;">
            <div style="display:inline-block;width: 4em; overflow: hidden; background-color: green;">
                <div style="height: 2em; overflow: hidden; max-height: 2em;">
                    <span>links </span>
                </div>
            </div><div style="display:inline-block;width: 8em; overflow: hidden; background-color: red;">
                <div style="height: 2em; overflow: hidden; max-height: 2em;">
                    <div style="width: 2em; height: 2em; background-color: white;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

以下链接到你的小提琴更新： http：// jsfiddle。 net / ev092xoq / 4 / [ ^ ]

在您的版本中：边框添加到所有div和一个额外的等效表格。

可以看出div-td-cells的高度超出应有的水平（如果比较相当于表格。



- 重新讨论解决方案 -

添加一些文字或& nbsp; 到白色div并且它有效：

Here is link to your fiddle updated: http://jsfiddle.net/ev092xoq/4/[^]
In your version: borders added to all divs and an additional table equivalent.
It can be seen the div-td-cells are taking more height than they should do (if compared the table equivalent).

--Solution revisited--
Add some text or   to the White div and it works:

<div style="width: 2em; height: 2em; background-color: white;">text or something needs to be added here</div>

更新的小提琴： http://jsfiddle.net/ev092xoq/6/ [ ^ ]

这篇关于为什么我的DIV身高错了？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！