【发布时间】：2015-03-06 19:35:00
【问题描述】：
因此，我在课堂上被分配在一周内编写这个重新设计的主页。它必须对我有响应，所以在我把它全部编码后（这本身就是一个奇迹），我开始研究如何让它响应。我知道这可能不是最好的做事方式，但是嘿，这真的是我第一次编写如此生动和学习的东西，我想。无论如何，我已经完成了我的 CSS 并将所有宽度设置为百分比以使其具有流动性（我认为这是一个很好的起点）。我为几乎所有内容分配了最大宽度，因为我有一个设置了 600 像素图像的滑块，我不希望它们超出该范围。所以一切正常，直到我低于 1300。你可以访问该网站here 看看会发生什么。我不明白为什么右边的两个框只是被告知要占据父 div 的一定百分比而跳下来。有趣的是，同时最后一个页脚项目也下降了。有什么我遗漏的或者我可以做些什么来使其正确扩展？
我知道实际上我不希望它无限扩展，并计划使用媒体查询以更小的分辨率处理它，但令我困扰的是，即使在如此高的 1300 分辨率下它也无法正确缩放。在我降到 1024 之前，我不打算进行媒体查询。
如果您有任何其他建议或资源可以让网站响应式随意分享。 提前致谢。
这是我的html
<div class="container">
<div id="captioned-gallery">
</div><!--captioned gallery-->
<div id="menu-ad">
<div>
<p class="titles">Our Fare</p>
<p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
<a href="#" id="button">VIEW MENU</a>
</div>
</div><!--end menu ad-->
<div id="hours">
<div>
<p class="titles">Hours</p>
<p id="down">
<span class="subtitles">Lunch</span>
<span class="hours">Mon-Fri 11-4</span>
</p>
<p>
<span class="subtitles">Dinner</span>
<span class="hours">Mon-Sat 4-12</span>
</p>
<p>
<span class="subtitles">Bar</span>
<span class="hours">Mon-Sat 4-12</span>
</p>
</div>
</div><div style="clear:both;"></div><!--end hours-->
</div><!--end container-->
还有 CSS
/*Container*/
div.container {
margin: 0 auto;
position: relative;
width: 70%;
max-width: 910px;
border: 2px solid #b9aea3;
}
/*slider*/
div#captioned-gallery {
width: 65.934066%;
max-width: 600px;
margin: 10px;
overflow: hidden;
height: auto;
float: left;
/*menu ad*/
div#menu-ad {
position: relative;
width: 31.648352%;
max-width: 288px;
height: auto;
float: right;
border-left: 2px solid #b9aea3;
border-bottom: 2px solid #b9aea3;
overflow: hidden;
}
div#menu-ad div {
background: #f9f4df;
margin: 10px;
padding: 1.9rem 4rem 2.5rem 2.5rem;
height: 200px;
display: inline-block;
}
a#button {
padding: .7rem 1.3rem .5rem 1.3rem;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.8rem;
color: #f8f8f1;
background: #d6832e;
text-align: center;
vertical-align: middle;
text-decoration: none;
position: absolute;
float: left;
bottom: 3.5rem;
}
/*hours*/
div#hours {
position: relative;
width: 31.648352%;
max-width: 288px;
height: auto;
float: right;
border-left: 2px solid #b9aea3;
}
div#hours div {
background: #f9f4df;
margin: 10px;
padding: 1.9rem 2.5rem 2.5rem 2.5rem;
width: auto;
height: 150px;
}
#down span{
margin-top: 1rem;
}
#hours p {clear:both;}
【问题讨论】：
-
这对我们来说实在是太多代码了。请坚持使用您认为相关的代码。
-
@Sebsemillia 是正确的。您的 CSS 中没有任何媒体查询。经验法则是将任何浮点数放在您希望断点所在位置的最小宽度内。宽度百分比意味着整个页面和所有容器都设置了百分比，除非您使用 box-sizing:border-box (paulirish.com/2012/box-sizing-border-box-ftw)，其中包括使用像素创建的边框，导致布局中断。
-
你也应该学习移动优先响应式设计。谷歌一下，有很多资源。
标签： html css responsive-design fluid-layout