1

我在使用 CSS 正确定位 DIV 时遇到问题。任何帮助将不胜感激！

问题： http ://teamcoding.ca/leisure/specialevent/在网站上，我希望“事件” div 以响应方式堆叠在每个顶部，无论高度如何，就像使用此网站完成的那样：http://themify。 me/demo/#theme=grido我的网站呈现方式，具有最高高度的 DIV 将所有其他 DIV 向下推。例如，如果将其扩展为三列，则 div #5 应低于 div #1。

JS 小提琴： http: //jsfiddle.net/QQFpD/4/这是我的代码。我认为将其发布在 JsFiddle 上比在 msg 框中更容易。（如果我也应该在这里发布我的代码，请告诉我。）

4

2 回答 2

2

这是花车的本质。示例页面（themify）也混淆了元素（浮动的性质），但能够以某种方式缩小差距。仔细观察，我们可以看到浏览器和窗口宽度调整之间存在一些动态相互作用，因为 DOM 更新为新的绝对位置，顶部值。您的解决方案必须在 jQuery 中，而不是在静态 CSS 中。

于 2012-06-10T19:55:00.370 回答
1

您的问题正如在浮动的性质上面指出的那样。您需要重新考虑如何根据列来定位事件。处理这个问题并使用浮动保持布局流畅的一个好方法是创建一个这样的网格，唯一的缺点是一些额外的非语义代码：

/* __row
 * A row of columns, we define total page width here */
.row        {width:960px; height:100%; margin: 0 auto; position:relative;}

/* __grid 
 * Master Grid Layout elements */

.col1, .col2, .col3, .col4, .col5, .col6 {
    position:relative;
    height:100%;
    float:left;
    margin-left: 2%;
}

使用百分比可以让我们改变整体宽度.row并扩展我们的列以适应。

.col1       {width: 15%;}
.col2       {width: 32%;}
.col3       {width: 49%;}
.col4       {width: 66%;}
.col5       {width: 83%;}
.col6       {width: 100%; margin-left:0;}
.colFirst   {margin-left:0;}
.colClear   {clear:both;}

使用它来创建一个 3 列的流体布局：

<div class="row"> 
    <div class="col2 colFirst">
        <ul>
             <li>1st item</li>
             <li>2nd item</li>
        </ul>
    </div>
    <div class="col2">... second column div's / data</div>
    <div class="col2">... third column div's / data</div>
    <div class="colClear></div>
</div>

这样，您的数据将全部落入列中，并在页面上无缝流动，提供您希望查看的确切方式，并且使用纯 CSS。

于 2012-06-10T21:08:50.360 回答