Question

我的平台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;
}

Answer 1

如果你的数学是正确的，那么必然会有其他干扰。您使用的是CMS还是其他可能具有某些底层CSS的东西？有时我发现不仅检查一个元素，而且将鼠标悬停在元素检查器打开的元素上是有帮助的（如果你不知道我在说什么，请确保你有类似Firebug的东西在Firefox中，或右键单击元素以在Chrome中检查它 - 这将显示元素的真实尺寸。另请查看＆＃34;计算样式。＆＃34;

如果您看到的是您不希望的宽度，请进一步向上检查每个元素，直到找到宽度意外的元素。

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

Answer 2

如果你的数学是正确的，那么必然会有其他干扰。您使用的是CMS还是其他可能具有某些底层CSS的东西？有时我发现不仅检查一个元素，而且将鼠标悬停在元素检查器打开的元素上是有帮助的（如果你不知道我在说什么，请确保你有类似Firebug的东西在Firefox中，或右键单击元素以在Chrome中检查它 - 这将显示元素的真实尺寸。另请查看＆＃34;计算样式。＆＃34;

如果您看到的是您不希望的宽度，请进一步向上检查每个元素，直到找到宽度意外的元素。

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

div垂直定位而不是水平php css3

2 个答案: