当使用 display:table-cell 为 div 设置填充时，它会更改具有相同显示的相邻 div 的填充答案

【问题标题】：When setting padding for a div with display:table-cell, it changes padding of a neighbour div with the same display当使用 display:table-cell 为 div 设置填充时，它会更改具有相同显示的相邻 div 的填充
【发布时间】：2014-07-16 05:32:36
【问题描述】：

我为我的内容创建了一个容器<div id="container">，作为回报，它有一个简单的<div id="leftbar"> 和<div id="content"> 用于页面的主要文本。

我在样式中将<div id="container"> 设置为display:table，并将<div id="leftbar"> 和<div id="content"> 设置为display:table-cell。

我现在遇到的问题是，每当我尝试更改 <div id="content"> 上的 padding 时，由于某种原因，它会影响 <div id="leftbar"> 中的填充。它仅适用于顶部padding。我该如何解决这个问题，更好的是，为什么会发生这种情况？是表结构的原因吗？

提供代码和jsfiddle。在 jsfiddle 中更改 CSS 中的最后 padding 行，以查看它如何移动左侧栏中的所有内容。

HTML：

<body>

<div id="wrapper">
    <div id="header"><img src="http://i.imgur.com/krQBHIx.jpg" width="690" height="100"/></div>
    <div id="container">
        <div id="leftbar">
            <ul>
                <p class="heading">Navigation</p>
                <li><a href="#">Main</a></li>
                <li><a href="#">Articles</a></li>
                <li><a href="#">Lessons</a></li>
                <li><a href="#">About</a></li>
            </ul>

            <p class="heading" style="background: #bb0;">Subscribe</p>
            <form action="subscribe.php" method="POST" name="form1">
                Subscribe to our RSS feed and get all the fresh news and articles directly in your mail box!<br /><br />
                <label><p>Enter your name:</p><input type="text"/></label>
                <label><p>Enter your e-mail:</p><input type="text"/></label>
                <input type="submit" name="submit" value="Send!"/>
            </form>                          
        </div>
        <div id="content">
            Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. 
        </div>
    </div> 
    <div id="footer"><img src="http://i.imgur.com/2GzQuoo.jpg" width="690" height="18"/></div>
</div>

</body>

CSS：

/* Styles */

*
{
    padding: 0;
    margin: 0;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    font: 14px Verdana, Tahoma, sans-serif;
}

*:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

a
{
    color: #000;
    text-decoration: none;
}

body
{
    background: #606B79;
}

p
{
    font: 14px Tahoma, Verdana, sans-serif;
}

#wrapper
{
    width: 690px;
    margin: 10px auto;
}

#header img
{
    display: block;
    height: 100%;
}

#footer img
{
    border: 1px solid black;
    border-top: none;
    display: block;
}

#container
{
    display: table;
    width: 100%;
    border-left: 1px solid black;
    border-right: 1px solid black;
    background: #fff;
}

#leftbar
{
    display: table-cell;
    width: 184px;
    border-right: 2px solid black;
    height: 100px;
    padding: 5px;
}

#leftbar ul
{
    list-style: none;
    margin-bottom: 15px;    
}

.heading
{
    text-align: center;
    background-color: #a22;
    color: #fff;
    padding: 3px;
    margin-bottom: 7px;    
}

#leftbar ul li
{
    border: 1px solid gray;
    border-bottom: none;  
}

#leftbar ul li:last-child
{
    border: 1px solid gray;    
}

#leftbar a
{
    display: block;
    padding: 2px 4px;
}

#leftbar a:hover
{
    background: #ccc;
}

#leftbar form
{
    border: 1px solid gray;
    padding: 10px;
    text-align: justify;
}

#leftbar form input
{
    width: 149px;
    margin: 3px 0;
}

#leftbar form input[type="submit"]
{
    height: 25px;
    background: #ccc;
    margin-top: 20px; 
}

#content
{
    display: table-cell;
    width: 506px;
    text-align: justify;
    padding: 25px;
}

jsfiddle：http://jsfiddle.net/9Qtpj/

请帮帮我？

【问题讨论】：

因为表格 div 的宽度是 100%，所以表格单元格 div 的宽度被计算为给定宽度和填充的比率，因此更改一个单元格将改变该比率，从而使两个单元格都发生变化.如果你想解决这个问题，你可以在表格单元格 div 中放置一个 div，然后在其中添加填充

标签： html padding css-tables

【解决方案1】：

尝试更改您的 CSS 样式。如果可以使用“浮动”，请不要使用 display:table 对齐元素这是你的代码

CSS

#container {
    width:100%;
    overflow:hidden
}
#content {
    float:right;
    width:506px;
    padding:25px;
}
#leftbar {
    width:184px;
    float:left;
    padding:5px;
}

【讨论】：

为什么不用display:table来对齐元素呢？
我之前使用过float，但认为这有助于将div 设置为相同的高度。不过还是谢谢！
@Arno 我知道你需要相同的高度才能得到白色的背景？但是您可以将其设置为#container

【解决方案2】：

#leftbar div 中的内容与基线对齐。要修复当前的 html/css，请更改以下内容：

#leftbar
{
    vertical-align: top;
    display: table-cell;
    width: 184px;
    border-right: 2px solid black;
    height: 100px;
    padding: 5px;
}

但是！你真的应该为此使用另一种方法。将非表格元素显示为表格可能会出现问题，并且不再需要。

开始学习 flexbox [最新和最伟大的网络布局] - http://css-tricks.com/snippets/css/a-guide-to-flexbox/ 并使用浮动作为后备 [参见 @AlexPrinceton 的回答]。

【讨论】：

只是认为将其用作表格可能更容易解决相同的高度问题。为什么它比使用浮动更糟糕？
主要是IE6/7不支持。没错，很快我们就不需要支持它们了——但浮动方式同样简单 [甚至更容易？] 并且有坚实的支持。
Flexbox 现在使用起来真的很早——也许它会支持主流浏览器
edit：您可以为 flexbox 编写备用方法以支持旧版浏览器，但也许现在不是讨论此类方法的时候。坚持@AlexPrinceton 的方法:)