网格定位问题

我是CSS/网格布局的新手，我很难让我创建的三列显示在全宽度网格(16色)下。解决这个问题的唯一方法是设置一个最小高度…

布局如下:

http://projects.upbeatdev.com/cats/(如果您查看源或从。text-overlay和。image中删除绝对位置，三列网格将显示，就像它应该显示的那样)

应该是这样的

头16个关口

下面的代码，见底部

<body>
    <div class="container">
        <section id="header" class="container">
            <div class="row">
                <div class="six columns">
                     <h1>ONE GOOD DEED TODAY.</h1>
                </div>
                <div class="seven columns">
                    <ul>
                        <li><a href="#">ITEM</a>
                        </li>
                        <li><a href="#">ITEM</a>
                        </li>
                        <li><a href="#">ITEM</a>
                        </li>
                        <li class="last"><a href="#">ITEM</a>
                        </li>
                    </ul>
                    <form id="search">
                        <input type="input" name="search" value="search" />
                    </form>
                </div>
                <div class="three columns">
                    <div class="eight columns">
                        <div class="row">hello</div>
                        <div class="row">hello</div>
                    </div>
                    <div class="eight columns">
                        <div class="row">hello</div>
                        <div class="row">hello</div>
                    </div>
                </div>
            </div>
        </section>
        <section id="homepage" class="container">
            <div class="row">
                <div class="sixteen columns alpha omega">
                    <div class="text-overlay">
                         <h1>TITLE</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt hendrerit enim at tristique. Aliquam purus sapien, eleifend imperdiet feugiat eu, consequat nec nisi. Phasellus condimentum urna a lacus consequat vestibulum. Curabitur vulputate nulla ac lacus pharetra iaculis. Nam et lectus nibh, sed pellentesque augue. Nulla ultricies vulputate mi eu tristique. Sed tellus leo, aliquam et iaculis a, tincidunt a neque. Sed congue sapien a erat dictum eget volutpat ligula interdum. Sed turpis dolor, tincidunt a tempus vitae, commodo et turpis. Nunc ultrices libero fringilla libero varius nec convallis ipsum convallis. Sed aliquam euismod felis, sit amet lobortis sem viverra non.</p>
                    </div>
                    <div class="image">
                        <img class="scale-with-grid" src="img/homepage-1.png" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="one-third column alpha omega">a</div>
                <div class="one-third column alpha omega">a</div>
                <div class="one-third column alpha omega">a</div>
            </div>
        </section>
    </div>
</body>

CSS:

section#header h1 {
    text-transform: uppercase;
    color:#000;
    font-size: 26px;
    font-weight: bold;
}
section#header ul li {
    display: inline;
    float: left;
    padding-right: 33px;
}
section#header ul li a {
    color:#000;
    text-decoration: none;
}
.last {
    margin-right: 0;
    padding-right: 0;
}
section#homepage .text-overlay {
    position: absolute;
    z-index: 1;
}
section#homepage .image {
    position: absolute;
}

您可能需要考虑创建包装器div。

这里的问题是你的元素是冲突的，因为浮动左

.container .columns {
      float: left;
     }

如果您将包装器放置在您想要在网格中的块部分周围，您可以对包装器内的元素应用float:left，而包装器div仍然保持该结构。因此，每个部分的包装器div为

#wrapper{
   display:block;
   width:100%;
   // plus any other code that you need
   // If you use .less you can very neatly add the other elements like so
   .seven columns{
     //style here
   }
}

这是使用包装器的结构的标准实现

<header>
  <div class="content-wrapper"> //Wrapper
      <div class="float-left"> // Here i can apply float that only effect elements inside to wrapper
         <p class="site-title"><a href="/">SITE NAME</a></p>
      </div>
      <div class="float-right">
         <section id="login">
           <ul>
              <li><a href="/Account/Register" id="registerLink">Register</a></li>
              <li><a href="/Account/Login" id="loginLink">Log in</a></li>
           </ul>
         </section>
                <nav>
                    <ul id="menu">
                        <li><a href="/">Home</a></li>
                        <li><a href="/Home/About">About</a></li>
                        <li><a href="/Home/Contact">Contact</a></li>
                    </ul>
                </nav>
        </div> //End of float right
    </div> // End of wrapper
  </header>

<div id="body">
  <section class="featured">
    <div class="content-wrapper"> // Start of new wrapper 
        <hgroup class="title">
        </hgroup>
    </div>
  </section>
  <section class="content-wrapper main-content clear-fix">
  </section>
</div>
    <footer>
        <div class="content-wrapper"> //Start of last wrapper
            <div class="float-left">
                <p>Footer content</p>
            </div>
        </div>
    </footer>

将包装器视为一个块，该块包含该部分中包装器内部的所有其他内容。它把它们连在一起以增加结构。像个盒子。所有其他元素都在"box"内。

CSS应该是这样的

.content-wrapper {
   margin: 0 auto;
   max-width: 960px;
   // Sometimes
   width:100%; // Depending on how you are structuring it
 }

相关内容

最新更新

热门标签：