0

3つの子を持つ私のプラットフォームdiv（データベースの行に応じていくつかの正方形）-内部の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 に答える