0
我是一個絕對的初學者，使我的第一個網站（鏈接到js小提琴here）。CSS - div的定位和調整大小的問題
我在與＃關於盒DIV一些問題：
當我調整窗口大小的頂部邊緣向下移動，而不是呆在固定的。我試圖使用百分比而不是像素，所以我不知道爲什麼會發生這種情況。
我已經使用媒體查詢，以使其在不同的分辨率下看起來不錯，但是
max-width 750px即使寬度設置爲100％，about-box div也不會填滿屏幕的寬度。
就像我說的，我在這裏是一個初學者，所以代碼可能有點混亂，它確實有一些筆記。任何幫助將非常感激！
的代碼如下：
/************************************
NAVIGATION
************************************/
.logo {
\t float: left;
\t max-width: 200px
}
nav {
\t font-size: 20px;
\t text-align: center;
\t padding: 10px 0;
\t margin: 20px 0 0 20px;
\t font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
nav ul {
\t list-style: none;
\t margin: 10px 10px;
\t padding: 0;
}
nav ul li {
\t display: inline-block;
\t float: right;
}
nav a {
\t padding: 15px 10px;
}
/*****************************************
HEADER IMAGE
******************************************/
#header-image {
\t display: block;
\t margin: 0;
}
#header-image img {
\t max-width: 100%;
\t display: block;
\t margin: 0;
\t padding: 0;
}
/*****************************************
SITE BODY
******************************************/
a {
\t text-decoration: none;
\t color: #000;
}
/*selected nav link*/
nav a:hover {
\t font-weight: bold;
}
/*****************************************
IMAGE
******************************************/
.hero-image img {
\t width: 75%;
\t max-height: auto;
\t display: block;
\t position: relative;
\t margin: auto;
\t padding: 0;
\t right: 1.5em;
\t top: 30px;
\t float: right;
\t z-index: -1;
}
/*****************************************
ABOUT BOX
******************************************/
#about-box {
\t max-width: 50%;
\t max-height: auto;
\t border: none;
\t background-color: #EBECE2;
\t text-align: center;
\t position: absolute;
\t top: /*13em;*/ 60%;
\t margin: /*300px 60px*/ 20% 5%;
}
h2 {
\t max-font-size: 28px;
\t font-family: helvetica, ariel;
\t text-align: center;
\t padding: 30px;
\t margin-top: 1em margin-bottom:0em;
}
p {
\t max-font-size: 20px;
\t text-align: center;
\t font-family: georgia; ariel;
\t font-style: italic;
\t padding: 30px;
\t margin: -3em .5em .5em 2em;
}
a:link {
\t text-decoration: none;
\t color: black;
}
/*******************************************
CTA BUTTON
*******************************************/
button {
\t margin: 0 0 50px;
\t padding: 0;
\t border: 0;
\t background: transparent;
\t font-family: inherit;
\t font-size: 1em;
\t cursor: pointer;
}
button::-moz-focus-inner {
\t padding: 0;
\t border: 0;
}
button span {
\t display: block;
}
button>span {
\t border: 2px solid;
\t border-color: #979797;
\t padding: 0 30px;
\t line-height: 30px;
\t font-family: georgia;
\t font-style: italic;
\t font-size: 20px;
}
button:hover {
\t background-color: #979797;
}
/*******************************************************
DESTINATIONS
*******************************************************/
ul.rig {
\t list-style: none;
\t font-size: 0px;
\t margin-left: -2.5%;
}
ul.rig li {
\t display: inline-block;
\t padding: 10px;
\t margin: 10% 0 2.5% 2.5%;
\t background: #fff;
\t border: /*1px solid #ddd*/ none;
\t font-size: 16px;
\t font-size: 1rem;
\t vertical-align: top;
\t box-shadow: /*0 0 5px #ddd*/ none;
\t box-sizing: border-box;
\t -moz-box-sizing: border-box;
\t -webkit-box-sizing: border-box;
}
ul.rig li img {
\t max-width: 100%;
\t height: auto;
\t margin: /*0 0 10px*/ 0;
}
ul.rig li h3 {
\t margin: 0 0 5px;
}
ul.rig li p {
\t font-size: .9em;
\t line-height: 1.5em;
\t color: #999;
}
ul.rig.columns-3 li {
\t width: 30.83%;
}
/*RESPONSIVE CSS*/
@media (max-width : 750px) {
\t #about-box {
\t \t max-width: 100%;
\t \t height: auto;
\t \t top: /*13em;*/ 30%;
\t \t margin: /*300px 60px*/ 20%;
\t }
\t .hero-image img {
\t \t display: none;
\t }
\t .rig {
\t \t margin: 300px 0;
\t }
}
@media (max-width : 480px) {
\t ul.grid-nav li {
\t \t display: block;
\t \t margin: 0 0 5px;
\t }
\t ul.grid-nav li a {
\t \t display: block;
\t }
\t ul.rig {
\t \t margin /*-left*/: 350px 0;
\t }
\t ul.rig li {
\t \t width: 100% !important; /* over-ride all li styles */
\t \t margin: 0 0 20px;
\t }
\t #about-box {
\t \t max-width: 100%;
\t \t /*overflow: hidden;*/
\t \t height: auto;
\t \t top: /*13em;*/ 30%;
\t \t margin: /*300px 60px*/ 20% auto;
\t }
}<body>
\t <header>
\t \t <img src="http://andthenwewent.space/img/sitetitle.jpg"
\t \t \t alt="and then we went" class="logo">
\t \t <nav>
\t \t \t <ul>
\t \t \t \t <li><a href="contact.html">Contact</a></li>
\t \t \t \t <li><a href="about.html">About</a></li>
\t \t \t </ul>
\t \t </nav>
\t </header>
\t <div id="header-image">
\t \t <img src="http://andthenwewent.space/img/homepagebanner.jpg"
\t \t \t alt="and then we went" class="header">
\t </div>
\t <div id="about-box">
\t \t <h2>For Explorers</h2>
\t \t <p>&thenwewent is a collection of images, quotes and stories from
\t \t \t a hand-picked selection of the world’s most exotic destinations.</p>
\t \t <button>
\t \t \t <span><span>Read More</span></span>
\t \t </button>
\t </div>
\t <div class="hero-image">
\t \t <img src="http://andthenwewent.space/img/about-photo.jpg"
\t \t \t alt="about this site">
\t </div>
\t <ul class="rig columns-3">
\t \t <li><img src="http://andthenwewent.space/img/png.jpg" /></li>
\t \t <li><img src="http://andthenwewent.space/img/wildwest.jpg" /></li>
\t \t <li><img src="http://andthenwewent.space/img/amazon.jpg" /></li>
\t </ul>
</body>
你想在哪裏＃關於框留在你的頁面？當它調整大小時，它應該保持固定在同一個地方嗎？ – Luca