Question

我是HTML和CSS的新手，我正在尝试编写响应式网站的代码。但是当我调整屏幕大小时，黑色条纹框的位置在屏幕缩小时不会向上移动。它似乎锁定到位，并且它与上面的幻灯片放映之间存在间隙，屏幕缩小得越多越宽。我在这里查看了所有其他问题并尝试了位置：相对，但我无法让它工作。任何人都可以告诉我如何在屏幕较小时让盒子位置与其余页面元素一起向上移动？非常感谢你。这是链接：

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">值，这就是滑块和黑色剥离框之间存在固定间隙的原因，即使屏幕调整大小。您可以将margin-top的值替换为等效百分比，即：

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

您还可以使用此处的CSS3 @media-queries指定5个圆圈为内联时的不同margin-top值，当5个圆圈堆叠在一行中时指定不同的margin-top值（浏览器窗口＆lt; 768px）。

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

1 个答案: