Question

我有一个关于我目前从设计到代码的网站的快速提问。我使用的是一个带有几个固定宽度列的简单网格布局，但由于某些原因，当浏览器包含在1500像素以下时，列开始包装。我非常困惑为什么会发生这种情况，因为我在容器上设置了宽度并且列是固定宽度的。

以下是我的登台服务器上的网站链接： http://staging.slackrmedia.com/halfpast/

以下是jsFiddle的链接： http://jsfiddle.net/PaFKW/

请注意位于jsFiddle

中的“外部资源”

以下是代码：

HTML：

<body class="transition">
    <div class="container center">
        <header class="row">        
            <div class="col-1-3-fixed">
                <nav>
                    <ul class="inline text-left">
                        <li>
                            <a href="">The Chronique</a>
                        </li>

                        <li>
                            <a href="">Boutiques</a>
                        </li>
                    </ul><!-- .inline .text-left -->
                </nav>
            </div><!-- .col-1-3-fixed -->

            <div class="col-1-3-fixed">
                <a href="">
                    <img src="http://staging.slackrmedia.com/halfpast/images/logo.png" class="img-center transition" alt="HalfPast Logo" />
                </a>
            </div><!-- .col-1-3-fixed -->

            <div class="col-1-3-fixed">
                <ul class="inline text-right">
                    <li>
                        <a href="">Login</a>
                    </li>

                    <li>
                        <a href="">Register</a>
                    </li>
                </ul><!-- .inline .text-right -->

                <nav>
                    <ul class="inline text-right">
                        <li>
                            <a href="">Reviews</a>
                        </li>

                        <li>
                            <a href="">Features</a>
                        </li>
                    </ul><!-- .inline .text-right -->
                </nav>
            </div><!-- .col-1-3-fixed -->
        </header><!-- .row -->  
    </div><!-- .container .center -->

    <div class="row">
        <div class="col-1 masthead background-cover">
            <div class="container center">
                <h1 class="text-center">Use HalfPast to find local luxury watch dealers.</h1>

                <h2 class="text-center">Register below or <a href="">log in here</a></h2>

                <form action="" class="center">
                    <input type="text" name="name" placeholder="First &amp; Last Name:" />
                    <input type="email" name="email" placeholder="Email Address:" />
                    <input type="password" name="password" placeholder="Password:" />
                    <input type="submit" value="Create your account" class="btn" />
                </form>
            </div><!-- .container .center -->
        </div><!-- .col-1 -->
    </div><!-- .row -->

    <div class="row how-does-halfpast">
        <div class="container center">
            <div class="col-1-fixed">
                <img src="http://staging.slackrmedia.com/halfpast/images/seperator.png" />

                <h1 class="tk-ltc-bodoni-175 text-center">How does HalfPast work?</1>               
            </div><!-- .col-1-fixed -->

            <div class="col-1-2-fixed">
                <img src="http://staging.slackrmedia.com/halfpast/images/imac.png" />
            </div><!-- .col-1-2-fixed -->

            <div class="col-1-2-fixed">
                <p><span class="text-red">HalfPast works with brands and retailers to simplify the way you shop for luxury watches</span></p>

                <p>Browse through our articles and request "Product Details" to connect with our network of manufacturer authorized dealers.</p>

                <p>HalfPast will anonymously submit your request to your local authorized dealer, who will respond with additional information. Our service introduces you to high-quality retailers and allows you to engage with them in a low-pressure environment.</p>

                <p>Authenticity is guaranteed.</p>
            </div><!-- .col-1-2-fixed -->
        </div><!-- .container .center -->
    </div><!-- .row -->

    <div class="row halfpast-features-services">
        <div class="container center">
            <div class="col-1-fixed text-center">
                <h1 class="tk-ltc-bodoni-175">HalfPast Features &amp; Services</h1>

                <h4 class="center">HalfPast partners with brands and retailers to help you find the relevant authorized retailer in your geography</h4>
            </div><!-- .col-1-fixed .text-center -->

            <div class="col-1-2-fixed">
                <div class="row">
                    <div class="col-1-8">
                        <p><span class="icon-map-marker text-red"></span></p>
                    </div><!-- .col-1-8 -->

                    <div class="col-7-8">
                        <p><span class="text-red">Find local watch dealers in your area</span></p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sodales rutrum mauris, a porta augue.</p>
                    </div><!-- .col-7-8 -->

                    <img src="http://staging.slackrmedia.com/halfpast/images/map.png" alt="Find local watch dealers in your area" class="img-border" />

                </div><!-- .row -->
            </div><!-- .col-1-2-fixed -->

            <div class="col-1-2-fixed">
                <div class="row">
                    <div class="col-1-8">
                        <p><span class="icon-info text-red"></span></p>
                    </div><!-- .col-1-8 -->

                    <div class="col-7-8">
                        <p><span class="text-red">Get exclusive content about brands</span></p>

                        <p>HalfPast partners with the leading brands in the luxury watch industry to provide exclusive branded content.</p>
                    </div><!-- .col-7-8 -->

                    <img src="http://staging.slackrmedia.com/halfpast/images/chrono-blue.png" alt="Get exclusive content about brands" class="img-border" />

                </div><!-- .row -->
            </div><!-- .col-1-2-fixed -->
        </div><!-- .container .center -->
    </div><!-- .row -->

    <div class="row sign-up">
        <div class="container center">
            <div class="col-1-fixed text-center">
                <h5 style="display: inline;">Sign up for a free HalfPast account &mdash; today</h5> 

                <a class="btn">Create your account</a>
            </div><!-- .col-1-fixed -->
        </div><!-- .container .center -->
    </div><!-- .row -->

    <footer class="row">
        <div class="container center">
            <div class="col-1-3-fixed footer-nav">
                <p>Navigation</p>

                <div class="row">
                    <div class="col-1-2">
                        <ul>
                            <li>
                                <a href="">The Chronique</a>
                            </li>
                            <li>
                                <a href="">Reviews</a>
                            </li>
                            <li>
                                <a href="">Contact</a>
                            </li>
                        </ul>
                    </div><!-- .col-1-2 -->

                    <div class="col-1-2">
                        <ul>
                            <li>
                                <a href="">Boutiques</a>
                            </li>
                            <li>
                                <a href="">Features</a>
                            </li>
                            <li>
                                <a href="">Register/Login</a>
                            </li>
                        </ul>
                    </div><!-- .col-1-2 -->
                </div><!-- .row -->
            </div><!-- .col-1-3-fixed -->

            <div class="col-1-3-fixed">&nbsp;</div>

            <div class="col-1-3-fixed">
                <p>Sign up for our newsletter</p>

                <form action="">
                    <input type="email" placeholder="your email address" required /><span class="form_hint">Proper format "name@something.com"</span>
                    <input type="submit" value="SIGN UP" class="btn small" />

                </form>
            </div><!-- .col-1-3-fixed -->

            <div class="col-1-fixed">
                <img src="http://staging.slackrmedia.com/halfpast/images/logo-footer.png" class="img-center transition" />
            </div><!-- .col-1-fixed -->
        </div><!-- .container .center -->
    </footer><!-- .row -->

CSS：

/* General
   ============================= */
html, html a { 
    padding-top: 20px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

    font-smooth: always;
    -webkit-font-smoothing: antialiased;
}

body { font: 1em/1.6 "myriad-pro", Arial, Helvetica, sans-serif; }

.left { float: left; }

.right { float: right; }

.center { margin: 0 auto; }

.img-center { 
    display: block;
    margin: 0 auto; 
}

.img-border { border: 5px solid #fff; }

/* Typography
   ============================= */ 
h1 { font-size: 2.2em; }

h2 {    font-size: 2em; }

h3 { font-size: 1.8em; }

h4 { font-size: 1.6em; }

h5 { font-size: 1.4em; }

h6 { font-size: 12em; }

a { 
    color: #434343;
    text-decoration: none; 
}

a:hover { color: #000; }

.text-right { text-align: right; }

.text-left { text-align: left; }

.text-center { text-align: center; }

.text-red { 
    color: #c60202; 
    font-size: 1.313em;
}

/* Lists
   ============================= */
ul { list-style: none; }

ul li,
ol li { line-height: 2; }

ul.inline li,
ol.inline li { display: inline; }

ul.inline li:last-child,
ol.inline li:last-child { margin-right: 0px; }

input { -webkit-appearance: none; }

a:active, a:active *,
a:focus, a:focus *,
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
    -moz-outline-style: none;
}

/* Effects
   ============================= */
.box-shadow {
    -webkit-box-shadow:  0px 0px 3px 3px rgba(150, 150, 150, 0.3);
    box-shadow:  0px 0px 3px 3px rgba(150, 150, 150, 0.3);
}

.border-radius { 
    -webkit-border-radius: 3px;   
    border-radius: 3px;
}

.transition,
a:hover {
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.background-cover { 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Selection
   ============================= */
*::selection {
    background: #d31d1c;
    color: #fff;
}

*::-moz-selection {
    background: #d31d1c;
    color: #fff;
}

*::-webkit-selection {
    background: #d31d1c;
    color: #fff;
}

/* Container (w/Micro-Clearfix)
   ============================= */
.container { max-width: 1080px; }

.container:before,
.container:after {
    content: " "; 
    display: table;
}

.container:after { clear: both; }

.container { 
    width: 80%; 
    *zoom: 1;
}

/* Grid
   ============================= */
[class*='col-'] {
    float: none;
    width: 100%;
}

*, *:after, *:before {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.row { margin-left: -20px; }

.row:after {
    clear: both;
    content: "";
    display: table;
}

/*
 * Grid Gutters
 */
[class*='col-'] {
    float: left;
    padding-left: 20px;
}

.row-pad { padding: 20px 0 20px 20px; }

.row-pad [class*='col-']:last-of-type { padding-right: 20px; }

/* 
 * Fluid Grid Columns
 */
.col-1 { width: 100%; }

.col-7-8 { width: 75%; }

.col-2-3 { width: 66.66%; }

.col-1-2 { width: 50%; }

.col-1-3 { width: 33.33%; }

.col-1-4 { width: 25%; }

.col-1-8 { width: 12.5%; }

/* 
 * Fixed Grid Columns 
 */
.col-1-fixed { width: 1080px; }

.col-7-8-fixed { width: 945px; }

.col-2-3-fixed { width: 720px; }

.col-1-2-fixed { width: 540px; }

.col-1-3-fixed { width: 360px; }

.col-1-4-fixed { width: 270px; }

.col-1-8-fixed { width: 135px; }

/* Header */
header img:hover { opacity: 0.6; }

header ul.inline li,
header nav ul.inline li { margin-right: 20px; }

header nav ul.inline li:last-of-type,
header ul.inline li:last-of-type { margin-right: 0px; }


header nav { margin-top: 90px; }

header.row .col-1-3-fixed:last-of-type nav { margin-top: 42px; }

header nav ul.inline li { margin-right: 80px; }

/* Masthead */
.masthead { 
    background: #000 url('../images/header.png') no-repeat center center;
    color: #fff;
    font-weight: 100;
    min-height: 555px; 
}

.masthead .container { margin-top: 90px; }

.masthead a { color: #c60202; }

.masthead a:hover { text-decoration: underline; }

.masthead h1, 
.masthead h2 { font-weight: 100; }

.masthead h1 { 
    font-size: 2.625em; 
    margin-bottom: 5px;
}

.masthead h2 { 
    font-size: 2em; 
    margin-top: 10px;
}

.masthead form { 
    background: #fff;
    margin-top: 60px;
    padding: 20px;
    width: 930px;
}

.masthead form input { height: 40px; }

.masthead form input[type="submit"].btn { 
    font-size: 1.25em; 
    line-height: 20px;
}

.masthead form ::-webkit-input-placeholder { color: #000; }

.masthead form :-moz-placeholder { color: #000; }

.masthead form ::-moz-placeholder { color: #000; }

.masthead form :-ms-input-placeholder { color: #000; }

/* Body */
.how-does-halfpast { margin-bottom: -65px; }

.how-does-halfpast .col-1-fixed img { padding-top: 40px; }

.halfpast-features-services { 
    background: #f4f4f4; 
    border-top: 1px solid #d9d9d9;
    margin: 1px 0; 
    padding-top: 60px;
}

.halfpast-features-services h4 { 
    font-size: 1.313em; 
    font-weight: 100;
    padding-bottom: 30px;
    width: 600px;
}

.halfpast-features-services [class*='icon-'] { 
    font-size: 4em; 
    margin-left: 13px;
}

.halfpast-features-services img { margin: 0 0 -8px 20px; }

.halfpast-features-services img.img-border { border-bottom: 1px solid #fff; }

.sign-up { 
    border-top: 1px solid #d9d9d9;
    padding: 100px 0;
}

.sign-up a.btn { margin: 0 0 -6px 30px; }

/* Footer */
footer { 
    background: #000; 
    color: #fff;
    padding: 15px 0 30px; 
}

footer a { color: #fff; }

footer a:hover { color: #ccc; }

footer ul { padding-left: 0px; }

footer ul li a { font-size: 0.875em; }

footer .col-1-3-fixed.footer-nav p { margin-bottom: 0px; }

footer form input { margin-right: 5px; }

footer .col-1-fixed { padding-top: 45px; }

footer .col-1-fixed img { opacity: 0.4; }

footer .col-1-fixed img:hover { opacity: 0.7; }

我真的很感激这方面的所有帮助。这是一个如此小巧，简单的事情，但它让我绝对疯狂。谢谢任何帮助我解决这个问题的人。

Answer 1

保存列的.container div设置为页面宽度的80％，因此当其父容器的计算宽度变得太窄时，其中的固定宽度元素将换行。如果计算的宽度小于1080，则最大宽度不会执行任何操作 - 将.container的宽度定义为固定，因此在较小的视图上，您只需执行水平滚动。

另外，我个人浏览浏览器宽度为1280，所以我会考虑进行一些重构以减少空白，因为在我看来顶部链接栏也会包围和断开。

为什么我的栏包装？

1 个答案: