css - 调整屏幕大小时，框大小不会相应调整

Question

我是 HTML 和 CSS 的新手，正在尝试编写一个响应式网站。但是当我调整屏幕大小时，黑色条纹框的位置并没有随着屏幕缩小而上移。它似乎锁定到位，它和上面的幻灯片放映之间有一个间隙，屏幕缩小得越多，间隙就越大。我查看了这里的所有其他问题并尝试了 position:relative，但我无法让它工作。谁能告诉我如何在屏幕较小时使框位置与其余页面元素一起移动？非常感谢。这是链接:

http://thehotelfrankfort.com/

HTML:

<div id="outerbeforecontent">
<div class="light">
<div class="container">
<div class="row">
<div class="twelve columns">
<p class="slider-desc">Centered in Frankfort’s historic Main Street, just two blocks from one of the most picturesque beaches of Lake Michigan, sits the historic Hotel Frankfort. Our 83 year-old boutique hotel boasts 17 guest rooms, all with private baths, individually controlled heating and air conditioning units and each decorated with a unique theme. An unforgettable gourmet continental breakfast is included in your stay. Our larger suites feature whirlpool tubs or sauna, two-story rooms, and even a fireplace - perfect for your spectacular Northern Michigan getaway! Feel like dining in? We have a full-scale restaurant, dining room and bar along with corporate conference facilities, with gourmet catered meals available for gatherings of up to 100. Come let us serve you in style and experience all Northern Michigan has to offer. From biking to fishing our famous salmon runs, snow skiing, sailing, or experiencing a great meal at one of our many unique restaurants, or even just watching a gorgeous sunset - Frankfort is the perfect place to explore! Whatever your pleasure, you’ll be charmed by the Hotel Frankfort’s blend of old world graciousness, modern-day amenities and peerless personalized service.</p>
<div id="pic"><img src="images/hotel_frankfort_logo_snippet.png"></img>
</div>
</div>
</div>
</div>
</div>
</div>

CSS:

#outerbeforecontent{ text-align: center; margin-top:-50px; width:100%; overflow:auto;}
#outerbeforecontent h1{ line-height:normal; font-weight:normal;}
.light{  padding: 56px 0px 0px;}

Answer 1

您正在指定一个固定的 margin-top 529px 的值至 <div class="promotion">这就是为什么即使调整屏幕大小时， slider 和黑色条纹框之间仍存在固定间隙的原因。您可以将 margin-top 的值替换为其等效百分比，即:

.promotion {
     text-align: center;
     margin-top: 41%;
}

您还可以使用 CSS3 @media-queries在这里指定一个不同的 margin-top当 5 个圆圈内联且不同的 margin-top 时的值当 5 个圆圈堆叠在一行时的值(浏览器窗口 < 768px)。