0

我想做一个3-col 布局，以便：

  • 左列包含一个固定/粘性列表项
  • 左列和中列具有固定的已知宽度
  • 第三列必须是剩余空间；没有单杠
  • 第三列将有多个列，我想为网格使用 Foundation 框架（下例显示两个蓝色的大 6）
  • 所有列必须从上到下展开

我想利用Zurb Foundation 框架并尽可能多地重用网格框架。

这是理想的布局：

在此处输入图像描述

到目前为止，这是我的代码：http: //jsfiddle.net/qhoc/UUfSF/

  <body>
    <div class='row'>
      <div class='col1 columns'>
          <ul class='sticky'>
              <li>Item 1</li>
              <li>Item 2</li>
              <li>Item 3</li>
              <li>Item 4</li>
              <li>Item 5</li>
          </ul>
      </div>
      <div class='col2 columns'>
          <div>Some text 2</div>
      </div>
      <div class='col3 columns'>
          <div class='row'>
              <div class='large-6 columns'>Left</div>
              <div class='large-6 columns'>Right</div>
          </div>
      </div>
    </div>
  </body>

的CSS：

body {
    position: relative;
}

.sticky{
    position:fixed;
    z-index:999;
}

.col1 {
    position: absolute;
    left: 0;
    background: yellow;
}

.col2 {
    position: absolute;
    left: 150px;
    top: 0;
    bottom: 0;    
}

.col2 div {
    background: red;
}

.col3 {
    position: absolute;
    left: 300px;
    top: 0;
    right: 0;
    bottom: 0;
}

.col3 div {
    background: blue;
}

有几个问题：

  • 第三列在屏幕的宽度上展开
  • 没有一列一直延伸到底部
  • 使用 large-6 的第三列的内列似乎不起作用

请帮助解决布局问题。谢谢！！

4

1 回答 1

0

我添加width: auto并且它有效

http://jsfiddle.net/qhoc/UUfSF/2/

于 2013-08-20T05:10:18.977 回答