Question

我有这个.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;
}

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

我不知道为什么“display：box; -webkit-box-orient：vertical”如果标签的子节点是“div”则工作正常，但如果它们是text，img等则不行。

有什么想法吗？

Answer 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>

如果我误解了你的需要，我道歉。

Answer 2

如果您不想添加更多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）

Fiddle

显示：框，这些元素有哪些作用？

2 个答案: