Question

我是一个绝对的初学者，制作我的第一个网站（链接到js小提琴here）。

我在＃about-box div中遇到了一些问题：

当我调整窗口大小时，顶边向下移动，而不是保持固定。我尝试使用百分比而不是像素，所以我不确定为什么会发生这种情况。
我已经使用媒体查询使其在不同的分辨率上看起来不错，但是在max-width 750px上，尽管宽度设置为100，但是关于框的div不会填充屏幕的宽度％。

就像我说的那样，我是初学者，所以代码可能有点杂乱，而且它确实有一些注释。任何帮助都会非常感激！

代码如下：

/************************************
    NAVIGATION
************************************/
.logo {
	float: left;
	max-width: 200px
}

nav {
	font-size: 20px;
	text-align: center;
	padding: 10px 0;
	margin: 20px 0 0 20px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

nav ul {
	list-style: none;
	margin: 10px 10px;
	padding: 0;
}

nav ul li {
	display: inline-block;
	float: right;
}

nav a {
	padding: 15px 10px;
}

/*****************************************
    HEADER IMAGE
******************************************/
#header-image {
	display: block;
	margin: 0;
}

#header-image img {
	max-width: 100%;
	display: block;
	margin: 0;
	padding: 0;
}

/*****************************************
    SITE BODY
******************************************/
a {
	text-decoration: none;
	color: #000;
}

/*selected nav link*/
nav a:hover {
	font-weight: bold;
}

/*****************************************
    IMAGE
******************************************/
.hero-image img {
	width: 75%;
	max-height: auto;
	display: block;
	position: relative;
	margin: auto;
	padding: 0;
	right: 1.5em;
	top: 30px;
	float: right;
	z-index: -1;
}

/*****************************************
    ABOUT BOX
******************************************/
#about-box {
	max-width: 50%;
	max-height: auto;
	border: none;
	background-color: #EBECE2;
	text-align: center;
	position: absolute;
	top: /*13em;*/ 60%;
	margin: /*300px 60px*/ 20% 5%;
}

h2 {
	max-font-size: 28px;
	font-family: helvetica, ariel;
	text-align: center;
	padding: 30px;
	margin-top: 1em margin-bottom:0em;
}

p {
	max-font-size: 20px;
	text-align: center;
	font-family: georgia; ariel;
	font-style: italic;
	padding: 30px;
	margin: -3em .5em .5em 2em;
}

a:link {
	text-decoration: none;
	color: black;
}

/*******************************************
    CTA BUTTON
*******************************************/
button {
	margin: 0 0 50px;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 1em;
	cursor: pointer;
}

button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

button span {
	display: block;
}

button>span {
	border: 2px solid;
	border-color: #979797;
	padding: 0 30px;
	line-height: 30px;
	font-family: georgia;
	font-style: italic;
	font-size: 20px;
}

button:hover {
	background-color: #979797;
}

/*******************************************************
    DESTINATIONS
*******************************************************/
ul.rig {
	list-style: none;
	font-size: 0px;
	margin-left: -2.5%;
}

ul.rig li {
	display: inline-block;
	padding: 10px;
	margin: 10% 0 2.5% 2.5%;
	background: #fff;
	border: /*1px solid #ddd*/ none;
	font-size: 16px;
	font-size: 1rem;
	vertical-align: top;
	box-shadow: /*0 0 5px #ddd*/ none;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

ul.rig li img {
	max-width: 100%;
	height: auto;
	margin: /*0 0 10px*/ 0;
}

ul.rig li h3 {
	margin: 0 0 5px;
}

ul.rig li p {
	font-size: .9em;
	line-height: 1.5em;
	color: #999;
}

ul.rig.columns-3 li {
	width: 30.83%;
}

/*RESPONSIVE CSS*/
@media ( max-width : 750px) {
	#about-box {
		max-width: 100%;
		height: auto;
		top: /*13em;*/ 30%;
		margin: /*300px 60px*/ 20%;
	}
	.hero-image img {
		display: none;
	}
	.rig {
		margin: 300px 0;
	}
}

@media ( max-width : 480px) {
	ul.grid-nav li {
		display: block;
		margin: 0 0 5px;
	}
	ul.grid-nav li a {
		display: block;
	}
	ul.rig {
		margin /*-left*/: 350px 0;
	}
	ul.rig li {
		width: 100% !important; /* over-ride all li styles */
		margin: 0 0 20px;
	}
	#about-box {
		max-width: 100%;
		/*overflow: hidden;*/
		height: auto;
		top: /*13em;*/ 30%;
		margin: /*300px 60px*/ 20% auto;
	}
}

<body>
	<header>
		<img src="http://andthenwewent.space/img/sitetitle.jpg"
			alt="and then we went" class="logo">
		<nav>
			<ul>
				<li><a href="contact.html">Contact</a></li>
				<li><a href="about.html">About</a></li>
			</ul>
		</nav>
	</header>

	<div id="header-image">
		<img src="http://andthenwewent.space/img/homepagebanner.jpg"
			alt="and then we went" class="header">
	</div>

	<div id="about-box">
		<h2>For Explorers</h2>
		<p>&thenwewent is a collection of images, quotes and stories from
			a hand-picked selection of the world’s most exotic destinations.</p>
		<button>
			<span><span>Read More</span></span>
		</button>
	</div>

	<div class="hero-image">
		<img src="http://andthenwewent.space/img/about-photo.jpg"
			alt="about this site">
	</div>

	<ul class="rig columns-3">
		<li><img src="http://andthenwewent.space/img/png.jpg" /></li>
		<li><img src="http://andthenwewent.space/img/wildwest.jpg" /></li>
		<li><img src="http://andthenwewent.space/img/amazon.jpg" /></li>
	</ul>
</body>

Answer 1

那是因为你使用

#about-box
  height: auto;
  top: 13em; 30%;

我刚评论过，一切正常。

CSS - 在调整大小时使用div定位和调整大小的问题

1 个答案: