Question

我在使用CSS正确定位DIV时遇到问题。任何帮助都会非常感激！

问题： http://teamcoding.ca/leisure/specialevent/在网站上，我希望“event”div在每个响应的顶部堆叠而不管高度如何，就像使用此网站一样：{{3我的网站渲染方式，高度最高的DIV会将所有其他DIV向下推。例如，如果将其展开为三列，则div＃5应低于div＃1。

JS小提琴： http://themify.me/demo/#theme=grido这是我的代码。我认为在JsFiddle而不是在msg框中发布它会更容易。（如果我也应该在这里发布我的代码，请告诉我。）

Answer 1

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

Answer 2

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

/* __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。

CSS定位DIV是流动的＆amp;响应

2 个答案: