Question

我一般都是CSS /网格布局的新手，我无法将我创建的三列显示在全宽网格（16列）下。解决这个问题的唯一方法是设置一个最小高度......

这是布局：

http://projects.upbeatdev.com/cats/（如果从.text-overlay和.image中查看源或删除绝对位置，则三列网格将显示为它的假设）

看起来应该是这样的

HEADER
   16 COLS
   1/3 col 1/3 col 1/3 col

下面的代码，请参见底部。

<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;
}

Answer 1

您可能需要考虑创建包装器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
   }
}

Answer 2

这是使用包装器

的结构的标准实现

<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>

将包装器视为一个块，该块包含该部分中包装器内的所有其他内容。它将它结合在一起以增加结构..就像一个盒子。所有其他元素都在“框”内。

css将是这样的

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

网格定位问题

2 个答案: