html - 如何制作流体布局

Question

所以我在类里面被分配在一周内编写这个重新设计的主页。它必须对我有响应，所以在我完成所有编码后(这本身就是一个奇迹)我开始研究如何让它响应。我知道这可能不是最好的做事方式，但是，嘿，这真的是我第一次编写任何代码，我想是这样现场学习的。无论如何，我已经检查了我的 CSS 并将所有宽度设置为百分比以使其具有流动性(我认为这是一个很好的起点)。我为几乎所有内容分配了最大宽度，因为我有一个 slider 设置了 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;}

Answer 1

右边的框之所以“往下跳”是因为你在#captioned-gallery上设置了10px的外边距。和一个 2px border-left在 #menu-ad .

---

解释

---

在 1400 像素宽的屏幕上

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

#captioned-gallery有 65.9..% 宽度 = 980 * 65.9 / 100 = 645.42px
还有 10 像素的边距 所以 #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 像素(#container 的宽度)，因此它适合。

---

在 1000 像素宽的屏幕上

如果你做同样的计算，你最终会得到这些结果

#container宽度为 700px
#captioned-gallery是 481.3 宽
#menu-ad宽 223.2

481.3 + 223.2 = 704,5px所以#captioned-gallery + #menu-ad 不适合 #container所以它会“跳下”，这是无法放入其容器的 float 元素的行为。

---

---

解决方案

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

The width and height properties include the padding and border, but not the margin

你的 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%