gpt4 book ai didi

html - 为什么第三列的文字被压低了?

转载 作者:太空宇宙 更新时间:2023-11-03 20:14:02 25 4
gpt4 key购买 nike

好吧,我编写了这个页面,但我不明白为什么第三列会压低我的文本(或其他元素)。它使用与第一个框相同的样式,但是虽然第一个框没问题,但第三个框将元素向下推了一些像素。

像这样:

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,这种差异让我很害怕。我考虑过用一些负边距“修复”它,但我想先了解问题所在,而不是“workhacking”。

提前致谢!

最佳答案

vertical-align: top 添加到 #contentWrapper > div。目前它是基线

Have a fiddle!

CSS

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

如果没有 vertical-align: topdiv 将其垂直对齐基于具有 15px 填充的 .sidebarContent。这导致了 15px 的差距。

关于html - 为什么第三列的文字被压低了?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25018273/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com