1. 首页
  2. 问答
  3. 为什么我的色谱柱打包？

为什么我的色谱柱打包？

2013-08-19 64 views
1

我有一个关于我目前从设计到代码的网站的简短问题。我使用简单的网格布局和几个固定宽度的列，但由于某些原因，当浏览器在1500像素以下包装时，列开始打包。我对此感到困惑，因为我在容器上设置了一个宽度，而列的宽度是固定的。为什么我的色谱柱打包？

下面是该网站的链接我的临时服务器上：http://staging.slackrmedia.com/halfpast/

这里是一个的jsfiddle链接：http://jsfiddle.net/PaFKW/

请注意 “外部资源”，位于在jsFDdle

下面是代码：

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 "[email protected]"</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; }

我真的很感激任何和所有帮助这一点。这是一个小而简单的事情，但它让我非常疯狂。感谢任何帮助我解决这个问题的人。

来源

2013-08-19 Keenan Payne

回答

1

保存列的.container div被设置为页面宽度的80％，所以当它们的父容器的计算宽度变得太窄时，它内部的固定宽度元素将进行换行。如果计算的宽度小于1080，则最大宽度不执行任何操作 - 将.container的宽度定义为固定宽度，以便在较小的视图上进行水平滚动。另外，我个人浏览的浏览器宽度为1280，所以我会考虑做一点重构来减少空白，因为在我看来，顶部链接栏也会环绕并断开。

来源

2013-08-19 21:21:45 JTravakh

+0

我不能相信我错过了'.container'被宣布在1080px之后有80％的宽度。现在，对于为什么要包装，这是完全合理的。感谢大量的帮助，只是我的一个简单的想念。 –

相关问题

 相关问题