Question

以下是包含当前代码的网站：http://www.actuatecontent.com

我正在建立我的第一个网站，我正试图在一个容器div中移动两个Div，他们只是不会让步。（.copy和.btn_section）

我做错了什么，我该如何纠正？

感谢您的帮助！

源代码：

＆＃13;

.second_section .container {
	position: relative;
	top: 300px;
	background-image: url(http://1.bp.blogspot.com/-I0jOcWYqW94/UdFZ9U8Si0I/AAAAAAAACRw/2Hhb0xY7yzY/s1600/84.jpg);
	height: 900px;
	width: 100%;
}

.copy {
	top: 300px;
	width: 100%;
	text-align: center;
	color: white;
	font-family: 'Josefin Sans', sans-serif;
	letter-spacing: 2px

}

.btn_section {
	position: relative;
	top: 300px;
	text-align: center;
}

.btn {

	margin-top: 100px
	color: white;
	border: solid 2px fixed;
}

.btn_section a {
	border: 1px solid white;
	padding: 20px 40px;
	text-decoration: none;
	background-color: #191919;
	color: white;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.33em;
	letter-spacing: 2px;
	text-transform: uppercase;

}

＆＃13;

<!doctype html>
<html>

<head>
<link type="text/css" rel="stylesheet" href="AC_css.css"/>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600'    rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:500' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
</head>

<body>
<div class="header">

	<div class="nav">
	<ul>
		<li><a href="#">ABOUT</a></li>
		<li><a href="#">WORK</a></li>
		<li><a href="#">TEAM</a></li>
		<li><a href="#">CONTACT</a></li>
	</ul>
	</div>
</div>

<div class="second_section">
	<div class="container">
		<div class="copy">
		<h1>ACTUATE CONTENT</h1>
			<br>
			<h3>Expert Content For Every Business</h3>
		</div>
		<div class="btn_section">
			<a href="#" class="btn">Write For Me!</a>

		</div>
	</div>

<div class="third_section">
	</div>

<div class="fourth_section">
	

	<div class="col">
		<a href="#"><img src="https://cdn0.iconfinder.com/data/icons/seo-smart-pack/128/grey_new_seo2-17-256.png"><h2>RESEARCH</h2></a>
		
		<br>
		<p>Our meticulous research methods will uncover the most relevant information for your project. </p>
	</div>

	<div class="col">
		<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/55-files-and-documents/512/Icon_17-512.png">
		<h2>WRITING</h2></a>
		<br>
		<p>Our seasoned, handpicked writers craft stellar content for your specific needs.</p>

	</div>

	<div class="col">
		<a href="#"><img src="http://i.imgur.com/AinCaug.png">
		<h2>EDITING</h2></a>
		<br>
		<p>Our editors work with leading authors and publishers to bring out the best in their writing.</p>
	</div>
	
</div>

<div class="footer">
	<div class="footer_info">
		<a href="#"><p>Designed by Ashwin Reddy / &copy;	Ashwin Reddy</p></a>

</div>
</body>

</html>

＆＃13;

Answer 1

尝试在.container类中添加padding-top。例如：

.second_section .container {
padding-top:200px;
        background-image: url(http://1.bp.blogspot.com/-I0jOcWYqW94/UdFZ9U8Si0I/AAAAAAAACRw/2Hhb0xY7yzY/s1600/84.jpg);
        height: 900px;
        width: 100%;
    }

不在父节内向下移动的Div

1 个答案: