Question

嗨大家我正在使用一个表：我网站的单元格间距布局，我需要一些帮助。我有一个两列网站，一个是侧边栏，另一个是内容。但是，如果我在其中一个table-cell div中添加任何边距，它会移动侧边栏间距。我需要这两个单元格的间距不同，我不知道该怎么做。我的代码如下：

CSS：

content {
    width : 100%;
    display : table;
    margin : 0 auto;
    height : 100%;
}

#side_bar, #main {
    display : table-cell;
}

#side_bar {
    border: 1px solid #111;
    width: 13%;
    background: linear-gradient(#444, #111);
}

#main {
    width: 65%;
}

#contact_box {
    margin-left: 30%;
    margin-top: 7%;
    background-color: #111;
    opacity: 0.3;
    width: 500px;
    height: 500px;
}

HTML：

<div id="content">
    <div id="main">
        <div id="contact_box">
            <form method="post" id="contact_form" action="contact.php">
                <p>Full Name:</p> <input type="text" size="40" id="fullname" name="fullname"><br/>
                <p>Email Address:</p> <input type="text" size="40" id="email" name="email"><br/>
                <p>Type of Inquiry:</p> <input type="text" size="40" id="question" name="question"><br/>
                <p>Message:</p> <textarea rows="20" cols="45"></textarea><br/>
                <input type="submit" style="float:right; text-transform: uppercase;" value="Send">
            </form>
        </div>
    </div>
    <div id="side_bar">
        <div id="divider"><h1>News Blurb</h1></div>
        <div id="news"><?php //print_news(); ?></div>
        <div id="divider"><h1>Featured Games</h1></div>
        <div id="featured"><?php //echo $games ?></div>
    </div>
</div>

感谢您的帮助。

Answer 1

尝试：

#side_bar {
    vertical-align:top;
}

表格单元间距问题

1 个答案: