1

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

这是布局：

http://projects.upbeatdev.com/cats/（如果您查看源代码或从 .text-overlay 和 .image 中删除绝对位置，则三列网格将按预期显示）

它应该看起来像这样

头
16
列 1/3 列 1/3 列 1/3 列

代码如下，见底部。

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

2 回答 2

0

您可能需要考虑创建包装器 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
   }
}
于 2013-05-28T21:09:33.237 回答
0

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

<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
 }
于 2013-05-29T07:45:04.420 回答