已知儿童宽度的两列CSS[英] CSS two columns with known children width

本文是小编为大家收集整理的关于已知儿童宽度的两列CSS的处理方法,想解了已知儿童宽度的两列CSS的问题怎么解决?已知儿童宽度的两列CSS问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

i创建一些代码以显示具有不同高度的框(高度将来自内部图像).

在此示例中效果很好: http://jsfiddle.net/gsnfg/

...但是,当我编辑某个高度(未来 - 图像高度)时, box 3 Set到高度100px ,结果不好.

如何准备CSS代码以创建两个列?

我不能使用表,也不需要使用jQuery或其他JS 可能吗?

推荐答案

否,如果没有JavaScript或服务器端语言,就无法在一般情况下处理此操作.

在某些情况下,您可以为每个单独的列添加包装器div s,但是元素大小的某些组合会使此看起来不好,例如: http://jsfiddle.net/suaak/3/3/ - 在该演示中,如果方框6在框中.大小的)元素,列可能会变得越不平坦.

与候选技术的比较,请参阅此答案,表明它们不起作用,并且还显示了涉及服务器端代码的解决方案的客户端部分:

如果您愿意使用javascript+jQuery,则应使用 /strong> .

还有一个原始的javascript版本: vanilla asonry p>

演示:

其他推荐答案

我通过 jfiddle 向一个可能的解决方案

首先为左框创建两个列第一,一个为右框创建一个.请参阅下面.

如果您担心box-container宽度,请简单地将.box-container {width:105px}添加到您的CSS.

 <div class="container">
        <div class="left box-container">
            <div class="box" style="height:60px;">1</div>

            <div class="box" style="height:100px;">2</div>

            <div class="box" style="height:60px;">3</div>

        </div><!-- left-box-container -->

        <div class="right box-container">
            <div class="box" style="height:30px;">1</div>

            <div class="box" style="height:200px;">2</div>

            <div class="box" style="height:60px;">3</div>

        </div><!-- right-box-container -->

    </div>

其他推荐答案

如果要使列结束相同的高度,也就是说,将div击倒,那些比邻居较小的div,则可以将CSS更改为类似的东西:

.box {background:#20abff; color:#fff; width: 5px; margin: 5px;}
.left {float:left;}
.right {float:left;}
.container {width:200px;}

您可以做的另一件事是用Divs制作伪表.

.Table_Wrapper { width: 400px; }
.Table_Row { width: 98%; padding: 1%;float: left; } 


<div class="Table_Wrapper">
    <div class="Table_Row">
        <div class="box left" style="height:60px;">1</div>
        <div class="box right" style="height:80px;">2</div>
    </div>
    <div class="Table_Row">
        <div class="box left" style="height:60px;">3</div>
        <div class="box right" style="height:60px;">4</div>
    </div>
    <div class="Table_Row">
        <div class="box left" style="height:60px;">5</div>
        <div class="box right" style="height:60px;">6</div>
    </div>
</div>

jsfiddle

本文地址:https://www.itbaoku.cn/post/583359.html