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

我希望（如文本“中心”和两个图像）中的元素显示为

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;
}

...但我看到我的页面就像我的第一张图片一样...

我不知道为什么“显示：框；-webkit-box-orient：垂直”如果标签的子项是“div”但如果它们是文本、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如果您不想添加更多Fiddle ，请添加一些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 回答