Question

所以我在课堂上被指派在一周内对这个经过重新设计的主页进行编码。在我把它全部编码（这本身就是一个奇迹）后，我必须对此做出反应，我开始研究如何使其响应。我知道这可能不是最好的做事方式，但是，嘿，这真的是我第一次编写任何如此生活和编程的东西我想。无论如何，我已经通过我的CSS并将所有宽度设置为百分比以赋予其流动性（我认为这是一个好的起点）。我为几乎所有东西分配了最大宽度，因为我有一个带600px图像的滑块，我不希望它们超过它。所以一切正常，直到我低于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的边距，在border-left上设置了2px #menu-ad。

<强>说明

在1400px宽屏幕上

#container的宽度为70％= 1400 * 70 / 100 = 980px

#captioned-gallery有65.9 ..％宽度= 980 * 65.9 / 100 = 645.42px 和10px边距，因此#captioned-gallery的宽度为645.42 + 2*10 = 665.42px

#menu-ad有31.6 ..％宽度= 980 * 31.6 / 100 = 309.68px 和2px border-left 所以#menu-ad是309.68 + 2px = 311.68px

#captioned-gallery + #menu-ad = 665.42 + 311.68 = 977,36px的宽度小于980px（#container的宽度），因此可以适合。

在1000px宽屏幕上

如果您进行相同的计算，最终会得到这些结果

#container宽700像素 #captioned-gallery宽481.3 #menu-ad是223.2宽

481.3 + 223.2 = 704,5px所以#captioned-gallery + #menu-ad 不再适合#container {/ 1>}所以它“跳下来”这是行为浮动元素无法容纳在其容器中。

<强>解

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

width和height属性包括填充和边框，但是不是保证金

你的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 Tricks - css media queries

例如，当视口低于最大宽度960px时，应将页脚宽度设置为100％，而不是70％。

如何制作流体布局

2 个答案: