0

私はこの.htmlを持っています

<!DOCTYPE html>
<html>
<head>
<title>HTML5 App</title>

<link rel="stylesheet" type="text/css" href="main.css"> 
<link rel="stylesheet" type="text/css" href="custom.css"> 
</head>

<body>

<div id="container">
    <div id="top">Top</div>
    <div id="middle">
        <div id="left">Left</div>
        <div id="center">
            Center
            <img src="iconos/Android MNMLcony.png" class="item" >
            <img src="iconos/Android MNMLcony.png" class="item" >
        </div>
        <div id="right">Right</div>
    </div>
    <div id="bottom">Bottom</div>
</div>


</body>

</html>

そしてこのcss

html, body { margin: 0; height: 100%; }

#container {
    height: 100%;
    display: -webkit-box; /* like LinearLayout */
    display:    -moz-box;
    -webkit-box-orient: vertical; /* like android:orientation */
    -moz-box-orient: vertical;
}

#top, #bottom { height: 50px; background-color: #A8A8A8}

#middle {
    -webkit-box-flex: 1; /* like android:layout_weight */
    -moz-box-flex: 1;

    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
}

#left, #right { background-color: #d0d0d0; -webkit-box-flex:1; }

#center {
background-color: #D8D8D8;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
}

このウェブを見せます

http://img839.imageshack.us/img839/4485/capturadepantalla201305q.png

要素 (テキスト「Center」と 2 つの画像など) をそのように表示したい

http://img811.imageshack.us/img811/4451/capturadepantalla201305g.png

それらをcss #centerに追加しようとしました

#center {
background-color: #D8D8D8;
-webkit-box-flex: 1;
   -moz-box-flex: 1;

display: -webkit-box;
display:    -moz-box;
-webkit-box-orient: vertical;
   -moz-box-orient: vertical;
}

...しかし、私のページは最初の画像のように見えます...

タグの子が「div」の場合、「display: box; -webkit-box-orient: vertical」が正常に機能する理由がわかりませんが、テキスト、img などの場合は機能しません。

何か案が？

4

2 に答える 2

1

各画像を div で囲んでみましたか?

    <div id="center">
        Center
        <div><img src="iconos/Android MNMLcony.png" class="item" ></div>
        <div><img src="iconos/Android MNMLcony.png" class="item" ></div>
    </div>

必要性を誤解していた場合は、申し訳ありません。

于 2013-05-17T08:46:48.747 に答える
1

これ以上フィドルbrを追加したくない場合は、いくつか追加してくださいdivs 

<div id="center">
        Center<br />
        <img src="iconos/Android MNMLcony.png" class="item" ><br />
        <img src="iconos/Android MNMLcony.png" class="item" ><br />
</div>

しかし、これが最良の選択肢であるはずです: (いくつかの div を使用)

フィドル

于 2013-05-17T09:01:17.463 に答える