Question

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

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

我现在遇到的问题是，每当我尝试更改padding上的<div id="content">时，由于某种原因，它会影响<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/

请帮帮我？

Answer 1

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

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

BUT！你真的应该使用另一种方法。将非表元素显示为表可能会产生问题，并且不再需要它。

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

Answer 2

尝试更改CSS样式。如果你可以使用＆＃34; float＆＃34;那么请使用display：table来对齐元素。这是你的代码

CSS

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

当使用display：table-cell为div设置填充时，它会使用相同的显示更改邻居div的填充

2 个答案: