gpt4 book ai didi

css - 在哪些元素中显示 : box, 有效?

转载 作者:太空宇宙 更新时间:2023-11-04 04:34:48 24 4
gpt4 key购买 nike

我有这个.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”时可以正常工作,但如果它们是文本、img 等则不行。

有什么想法吗?

最佳答案

如果您不想添加更多div,请添加一些br Fiddle

<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

关于css - 在哪些元素中显示 : box, 有效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16604900/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com