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

问题描述

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>

演示:

• -jquery.html

其他推荐答案

我通过 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