gpt4 book ai didi

html - 如何扩展我的
以适本地适应更多垂直内容?

转载 作者:行者123 更新时间:2023-11-28 13:42:30 25 4
gpt4 key购买 nike

每当我尝试添加 margin-top: 30px到我的box_1box_2 <div> , 我的屁股 <div>被推下并消失。似乎我的包装器不会展开以适应内容。

如何在 top 之间获得 30px 的间距? box_1/2 bottom

<html>

<head>
<title>Circle Motion</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
<div id="outer-wrapper">
<div id="wrapper">

<div id="top">
</div>

<div id="box_1">
<img src="chrome_400x400.png" />
</div>

<div id="box_2">
<img src="firefox_400x400.png" />
</div>

<div id="bottom">
<p>All Rights Reserved - CSS_maniac 2012 ©</p>
</div>

</div>
</div>
</body>

</html>

CSS

/* My CSS */

html {
height: 100%
}

body {
background-color: grey;
}

#outer-wrapper {
height: 100%;
width: 1000px;
margin: 0px auto;
background-color: #EAFFDB;
-moz-border-radius: 15px;
border-radius: 15px;
}

#wrapper {
height: 100%;
width: 960px;
margin: 0px auto;
background-color: #EAFFDB;
overflow: hidden;
}

#top {
width: 900px;
height: 110px;
margin-top: 35px;
margin-left: 30px;
margin-right: 30px;
background-color: white;
-moz-border-radius: 15px;
border-radius: 15px;
}

#box_1 {
width: 430px;
height: 430px;
background-color: white;
-moz-border-radius: 15px;
border-radius: 15px;
float:left;
margin-left: 30px;
text-align: center;
}

#box_2 {
width: 430px;
height: 430px;
background-color: white;
-moz-border-radius: 15px;
border-radius: 15px;
float:right;
margin-right: 30px;
text-align: center;
}

#box_1 img {
margin: 15px 0px;
}

#box_2 img {
margin: 15px 0px;
}

#bottom {
width: 900px;
margin: 0px auto 0px auto;
text-align: center;
background-color: white;
-moz-border-radius: 15px;
border-radius: 15px;
clear:both;
}

/* Classes */

.clear {
clear: both;
}

最佳答案

我已经为您稍微调整了您的代码:

http://jsfiddle.net/83RZc/

关于html - 如何扩展我的 <div> 以适本地适应更多垂直内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12239873/

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