2

我有一个与backbone.js 一起使用的现有项目，我必须使用基础做前端（我没有做它的主干部分）。就目前而言，它是一个两栏博客类型的网站，当然我需要侧边栏和内容栏始终保持相同的高度。我有三个问题：

  1. 当我使用你可能已经猜到的基础时，这是一种响应式设计，其中列具有动态宽度
  2. 使用主干，需要等高的列不会出现在加载/准备好文档时，它们将在登录完成后出现并由主干附加到 DOM。（我有一个空的 div，其中骨干根据需要添加了东西）
  3. 此外，侧边栏包含一个项目列表，当单击这些项目时，它们会从侧边栏消失并出现在内容区域中，当用户点击项目时，列的高度会发生变化。

我尝试了一些脚本无济于事，因为在它们实际出现在 DOM 上之后我永远无法更改列的高度（我不知道怎么做？）而且我担心这样做的 css 方式会破坏当数字 3 发生时，我的响应式布局/不起作用。

这是我的 html，很简单，当它被加载时：

<div class="row home collapse">
    <div class="large-5 columns sidebar home-column">
    </div>
    <div class="large-7 columns content home-column">
    </div>
</div>
4

1 回答 1

0

如果您已经在使用像 Foundation 这样的框架，不确定这是否是一个好的解决方案；但请查看这篇文章：等高列 - 跨浏览器。

另一种解决方案是使用背景颜色；但是，它依赖于 CSS3。例如：

.container{
  width: 100%;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #aaa), color-stop(66.7%, #aaa), color-stop(66.7%, #333), color-stop(100%, #333));
  background-image: -webkit-linear-gradient(left, #aaa 0, #aaa 66.7%, #333 66.7%, #333 100%);
  background-image: -moz-linear-gradient(left, #aaa 0, #aaa 66.7%, #333 66.7%, #333 100%);
  background-image: -ms-linear-gradient(left, #aaa 0, #aaa 66.7%, #333 66.7%, #333 100%);
  background-image: -o-linear-gradient(left, transparent 0, #aaa 66.7%, #333 66.7%, #333 100%);
  background-image: linear-gradient(left, #aaa 0%, #aaa 66.7%, #333 66.7%, #333 100%);
}

.container:after{
  display: table;
  float: none;
  content: "";
}

.container .column1{
  max-width: 66.7%;
  width: 100%;
  float: left;
}

.container .column2{
  max-width: 33.3%;
  width: 100%;
  float: left;
}

百分比应该与您的块大小相同。该示例适用于两列。如果您的标记与此类似：

<div class="container">
  <div class="column1">
    <p>Some content</p>
  </div>
  <div class="column2">
    <ul>
       <li>Some Items</li>
       <li>Some Items</li>
    </ul>
  </div>
</div>
于 2013-08-14T16:21:29.690 回答