如何做流体布局

Question

所以我在课堂上被指派在一周内对这个重新设计的主页进行编码。它对我有反应，所以在我把它全部编码(这本身就是一个奇迹)之后，我开始研究如何使它响应。我知道这可能不是最好的方式，但这真的是我第一次编码任何这样的生活和学习，我想。无论如何，我已经浏览了我的CSS，并将所有宽度设置为百分比，以使其流动性(我认为这是一个很好的起点)。我分配了一个最大宽度几乎所有的东西，因为我有一个滑块设置600 to图像，我不希望他们的比例超过这一点。所以一切都很好直到我降到1300以下。您可以访问网站这里，看看会发生什么。我不明白，如果只要求右面的两个箱子占家长的某一百分比，他们便会跳下去。有趣的是，在同一时间点，最后一个页脚项目也下降了。有什么东西是我缺少的，或者我能做些什么来使它适当地缩放？

我知道，实际上，我不希望它无限期地缩放，并计划使用媒体查询来处理较小分辨率的问题，但让我感到困扰的是，它在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;}

Answer 1

右框“向下”的原因是您在#captioned-gallery上设置了10 2px边距，在#menu-ad上设置了2px border-left。

解释

在1400 On宽屏幕上

#container有70%的宽度= 1400 * 70 / 100 = 980px

#captioned-gallery有65.9%的宽度= 980 * 65.9 / 100 = 645.42px

和10 so边距，因此#captioned-gallery的宽度是645.42 + 2*10 = 665.42px。

#menu-ad有31.6.%宽度= 980 * 31.6 / 100 = 309.68px

和一个2px边框左所以#menu-ad是309.68+2px=311.68px

因此，#captioned-gallery + #menu-ad = 665.42 + 311.68 = 977,36px的宽度小于980 it (#container宽度)，使能够适应。

1000 On宽屏幕上的

如果你做同样的计算，你就会得到以下结果

#container宽700 is

#captioned-gallery是481.3宽

#menu-ad是223.2宽

481.3 + 223.2 = 704,5px所以#captioned-gallery + #menu-ad 不能再在#container中安装了，所以它“跳转”了，这是浮动元素的行为，不能在它们的容器中使用。

溶液

除了使用Sebsemillia所述的媒体查询之外，您还可以将页边距更改为%(包括元素总数中的空白，因此不超过100%)，并使用box-sizing CSS属性将left-border包含在#menu-ad , #hours宽度中：

宽度和高度属性包括填充和边框，但不包括边距。

您的CSS可能如下所示：

#captioned-gallery{
    width:65%;
    margin:10px 1%;
}
#menu-ad,#hours{
    width:33%;
    border-left:2px solid #b9aea3;
    box-sizing: border-box;
      -moz-box-sizing: border-box;     //for firefox support
}

33% + 65% + 2*1% = 100%

Answer 2

你应该调查一下媒体查询。我想如果你读了这篇文章，就会对你理解这个问题有很大的帮助。

CSS技巧- css媒体查询

例如，当视口在最大宽度960 70以下时，您应该将页脚的宽度设置为100 %，而不是70%。