Question

无法在WP 3.0.4中显示我的css样式，以便在容器div中对4个盒子（div）进行水平对齐。注意：在我的手工编码的html / php网站上，相同的CSS样式与HTML 4.01 Transitional // EN一起正常工作。但是WP 3.0.4显示了四个相互降低的盒子，就像一个楼梯。

我正在使用FireFox 3.6.13，顺便说一句。

CSS：

 div .box-container { display: inline;
 margin: 0.63em 0pt; padding: 10px;
 width: 640px; background-color:
 rgb(229, 231, 225); position:
 relative; float: left; overflow:
 hidden; }

 div .small-box { border: 1px solid
 rgb(153, 51, 102); margin: 10px 5px;
 padding: 0.325em; float: left;
 background-color: rgb(255, 244, 227);
 width: 128px; line-height: 0.85em;
 max-height: 8em; min-height: 8em;
 position: relative; }

HTML就像这样：

 <div class="box-container">
 <div class="small-box">SOME TEXT
 & IMAGE</div> <div
 class="small-box">SOME TEXT &
 IMAGE</div> <div
 class="small-box">SOME TEXT &
 IMAGE</div> <div
 class="small-box">SOME TEXT &
 IMAGE</div>

 </div>

box-container div width指定为640px，但我注意到padding将其扩展到此范围之外。在任何情况下，它都足够容纳四个小盒子，总共512px加上他们的总40px边距，加上盒子容器div上的20px填充。

我不明白为什么填充推动了box-container div的大小。但是当我尝试使用max-width：640px时，我观察到这些盒子都垂直排列，盒子容器div不超过170px。

小盒子div实际上大小相同，其内容包括文本和文本。图像。

帮助？

Answer 1

我会尝试一些事情： *显示：在容器中阻止 *！在所有礼仪中都很重要 * font-size declare（您使用的是16px字体大小？并且在您的主题中有另一个值吗？） *显示：小盒子阻挡

[]的

Answer 2

我认为您需要从这些行中删除空格：

div .box-container
div .small-box

像这样：

div.box-container

然后，从padding删除div.box-container规则。

要返回填充，请在div.box-container内添加包含所需填充的包装元素。或者，您可以将margin上的div.small-box更改为margin: 20px 0 20px 15px，而不是添加额外元素，以使其近距离显示。

Answer 3

我想我明白你的意思是楼梯。当我忘记用左浮动物体排列宽度/高度时，通常会发生这种情况。所以就像每个小盒子试图向左浮动一样，但浏览器认为在此之前盒子里有东西，所以它将下一个小盒子向下推到“下一行”。这是我一直在“楼梯”外观框中看到的一般逻辑。

您可以先尝试使用设定的宽度和高度进行测试。并确保盒子符合他们的要求。然后去最大宽度和最大高度。

没有屏幕截图和/或更好的链接，这就是我所能说的：）

Answer 4

发现问题：WordPress产生了无效的HTML。当我去验证CSS和HTML时，CSS检查干净，但HTML充满惊喜。我没有意识到，直到我在浏览器中访问页面源并看到WordPress已经放入了很多段落标签和其他标签，一些列表标签，我当然没有进入页面编辑器。无论如何，HTML验证器在box-container div中指出了一个段落结束标记。它没有任何业务 - 甚至没有开始的段落标记。

所以我回到了页面编辑器，删除了HTML之间的所有空格，并更新了页面。好极了！它的工作正常。

获得的经验：不经过验证就不信任WordPress HTML编辑器。

非常感谢那些回复的人。特别有用的是指向http://jsfiddle.net的链接，这是非常有用的工具，并让我放心，我的CSS是正确的。

div容器内div的CSS水平对齐？

4 个答案: