0

我的平台 div（根据数据库中的行有几个正方形）内部有 3 个子 div，它们垂直放置在包装 div 内，而不是水平放置。我将平台 div 以及它的 3 个孩子的“-webkit-box-orient”设置为水平，但我没有让它工作。谢谢你的小费！爱好

<div id="wrapper">


<?php
$platforms = get_platforms();

foreach ($platforms as $platform)
{
echo 
'<div class="platform">
    <div class="platform_left"></div>
        <div class="platform_middle"></div>
        <div class="platform_right"></div>
    </div>';
}
?>

</div>

//And here is the css:


#wrapper{
max-width: 960px;
margin: 180px 0px;
border: 1px solid black;
background:-webkit-radial-gradient(top,#99CCFF,#E6F0FF);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
background:-moz-radial-gradient(top,#99CCFF,#E6F0FF);
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-flex: 1;
}

.platform{
border: 1px solid blue;
margin: 30px 30px 0px 30px;
width: 435px;
height: 180px;
background: #99CCFF;
-webkit-border-radius: 5px;
-webkit-box-shadow: rgba(110, 110, 100, .7) 8px 8px 8px;
-moz-border-radius: 5px;
-moz-box-shadow: rgba(110, 110, 100, .7) 8px 8px 8px;
display: -webkit-box;
display: -moz-box;
}
4

2 回答 2

1

od div.platform 中的 div 与它们的父级 (div.platform) 具有相同的宽度

你必须设置它们width: 33%（或者更少，以防你想使用边框、边距和填充），然后将float属性设置为left。

无需编辑 PHP 部分

W3c 说：

任何主流浏览器都不支持 box-orient 属性。

对不起我的英语不好

于 2012-04-30T11:45:44.010 回答
0

如果你的数学是正确的，一定有其他的干扰。您使用的是 CMS 还是其他可能有一些底层 CSS 的东西？有时我发现不仅检查一个元素而且在打开元素检查器的情况下将鼠标悬停在一个元素上很有帮助（如果你不知道我在说什么，请确保你在 Firefox 中有类似 Firebug 的东西，或者右键单击元素以在 Chrome 中检查它）——这将显示元素的真实尺寸。还要看“计算风格”。

如果您看到不期望的宽度，请继续往上走并检查每个元素，直到找到具有意外宽度的元素。

在使用底层框架设计网站主题时，我经常遇到这个问题。如果你的包装器内的数学是正确的，那么有些东西正在挤压包装器 div 的尺寸。还要寻找排水沟 - 来自另一个样式表的意外填充或边距。

于 2012-05-01T19:29:32.277 回答