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

【问题标题】：CSS horizontal alignment for divs inside div container?div容器内div的CSS水平对齐？
【发布时间】：2014-05-30 17:59:04
【问题描述】：

在 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 的宽度指定为 640 像素，但我注意到填充将其扩展到了此之外。无论如何，它足够容纳四个小盒子，总共 512px 加上它们的总 40px 边距，再加上 box-container div 上的 20px 填充。

我不明白为什么填充会推动盒子容器 div 的大小。但是当我尝试使用 max-width: 640px 时，我观察到所有的盒子都是垂直排列的，并且盒子容器的 div 不超过 170px。

小盒子的 div 实际上都是一样大小的，它们的内容由文本和图像组成。

帮助？

【问题讨论】：

演示：jsfiddle.net/RasTq
谢谢，是的，这就是我对 CSS 的目标和期望，但不适用于我的主题。非常有用的链接 - 将添加书签！

标签： css wordpress alignment

【解决方案1】：

我会尝试一些事情： * 显示：容器中的块 * !在所有礼仪中都很重要 * font-size 声明（您是否使用 16px 字体大小？并且在您的主题中有另一个值？） * 显示：在小框中块

[]的

【讨论】：

Rochester，盒子容器和小盒子 div 中的 display:block 没有改变任何东西。实际上，根据我在谷歌上搜索这个谜题的答案，大多数人建议使用 display:inline，而不是 display:block。字体样式在 <span> 中声明。标签。文本和图像按预期显示。

【解决方案2】：

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

div .box-container
div .small-box

像这样：

div.box-container

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

要取回填充，请在 div.box-container 内添加一个带有所需填充的包装元素。或者，您可以将div.small-box 上的margin 更改为margin: 20px 0 20px 15px，而不是添加额外的元素，以使其看起来更接近。

【讨论】：

谢谢你，三十点。从 div.box-container 中删除填充确实使它恢复到正确的宽度，并且 div.small-box 上的边距变化效果很好。但是，我仍然看到一个楼梯。 :(据我所知，声明 div.style 或 div .style 或仅仅 .style 都没有关系。无论如何，我试过了，但没有改变。
“楼梯”是什么意思？屏幕截图会很好，链接到实时网站会更好。
Thirtydot，请参阅下面的屏幕截图链接。抱歉，没有实时站点 - 为 dev 运行本地安装。

【解决方案3】：

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

您可以先尝试使用设置的宽度和高度进行测试。并确保盒子适合它们。然后去最大宽度和最大高度。

如果没有屏幕截图和/或更好的链接，我只能这么说:)

【讨论】：

Weptile，我上传了 3 张截图：imgur.com/VZ2Nc.png、imgur.com/ufw2i 和 imgur.com/h8HY9。第一个是我的手动编码网站的屏幕截图，表现符合预期。二是阶梯效应。第三个是我使用 max-width: 640px 作为 box-container div 时发生的屏幕截图。

【解决方案4】：

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

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

经验教训：不要信任未经验证的 WordPress HTML 编辑器。

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

【讨论】：