Question

好吧，我编写了这个页面，但是我被困在为什么第三列正在推翻我的文本（或其他元素）。它使用与第一个框相同的样式，但是第一个框没问题，第三个框将元素按下一些像素。

像这样：

this gap it's freaking me out

HTML

<div id="contentWrapper">
    <div id="sideBar">
        <div class="sidebarBox"></div>
        <div class="sidebarContent">
            <h4>
                Índice
            </h4>
            <ul class="tree">
                <li>
                    <a href="#sinopse">Sinopse</a>
                </li>
                <li>
                    <a href="#tropas">Tropas</a>
                </li>
                <li>
                    <a href="#">Geladeira</a>
                    <ul>
                        <li>
                            <a href="#logica">Lógica</a>
                        </li>
                        <li>
                            <a href="#genio">Gênio</a>
                        </li>
                        <li class="last">
                            <a href="#horror">Horror</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#notas">Notas</a>
                </li>
                <li>
                    <a href="#midia">Mídia</a>
                </li>
                <li class="last">
                    <a href="#referencias">Referências</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="mainBody"></div>
    <div id="infoBar">
        <div class="sidebarBox"></div>3º Column
    </div>
</div>

CSS

* {
    margin:0;
    padding:0;
    font:normal normal 14px/20px Helvetica,Arial,sans-serif
}

h4 {
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    padding-top:10px;
    border-bottom:2px solid #2a558c;
    margin-bottom:10px
}

#contentWrapper {
    display:table;
    border-spacing:0;
    width:100%;
    height:500px
}

#contentWrapper > div {
    display:table-cell
}

#sideBar {
    background-color:#E4E5DD;
    width:200px
}

#mainBody {
    background-color:#EEEEE6
}

#infoBar {
    background-color:#e4e5dd;
    width:200px
}

#footer {
    background-color:#323540;
    height:50px
}

.sidebarBox {
    background-color:#323540;
    height:30px;
    width:100%
}

.sidebarContent {
    padding:15px
}

我和Firebug搞砸了很多，甚至试图在IE和Chrome中打开它，结果相同。两列都使用相同的CSS，这种差异让我感到非常震惊。我想用一些负面的边缘来“修复”它，但我想首先理解这个问题，把“工作模式”放在一边。

提前多多感谢！

Answer 1

将vertical-align: top添加到#contentWrapper > div。目前是baseline。

Have a fiddle!

CSS

#contentWrapper > div {
    display: table-cell;
    vertical-align: top;
}

如果没有vertical-align: top，则div将其垂直对齐基于.sidebarContent，其中包含15px的填充。这导致了15px的差距。

Answer 2

更改以下内容，它应该可以解决您的问题。我发现在使用display:table-cell时，它总是错误地对齐最后一个单元格，除非我特意给它一个垂直对齐

#contentWrapper > div {
    display: table-cell;
    vertical-align:top;
}

Example

Answer 3

将display:inline-block添加到此类：

.sidebarBox {
    background-color: #323540;
    height: 30px;
    width: 100%;
    display: inline-block;/*Add this*/
}

fiddle

Answer 4

.sidebarBox {
    float:right;
}

会奏效。

为什么第三列的文字被推下来了？

4 个答案: