Question

我尝试使用box-sizing:border-box;float:left元素构建一个简单的表。

警告1.也许我的方法很糟糕，甚至可能没有必要使用＆＃34; float＆＃34;和＆＃34;盒子大小＆＃34;要完成此任务的属性，那么在这种情况下你会做什么？警告2.当然，您应该记住，您必须使用支持CSS3的现代浏览器来查看此标记：）

<!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta charset="utf-8">
            <style>
                div {
                    vertical-align:top;
                    margin:0px;
                    padding:0px;
                }
                div.table {
                    border:solid 2px green;
                    width:90%;
                    background-color:red;
                }
                div.table > div:not(.clear) 
                {
                    -moz-box-sizing:border-box;
                    box-sizing:border-box;
                    float:left;
                    max-height:8em;
                    overflow:auto;
                    border:solid thin black;
                    background-color:white;
                }
                div.table > div:nth-child(3n+1):not(.clear) 
                {
                    clear:left;
                    width:40%;
                }
                div.table > div:nth-child(3n+2):not(.clear),div.table > div:nth-child(3n+3):not(.clear) {width:30%;}
                div.clear {clear:both;height:0px;border-style:none;}
            </style>
        </head>
        <body>
            <div class="table">
                <div>
                    Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first
                </div>
                <div>Middle first</div>
                <div>Right first</div>
                <div>Left second</div>
                <div>Middle second</div>
                <div>Right second</div>
                <div class="clear"></div>
            </div>
        </body>
    </html>

你看到那个红色区域，它显示出＆＃34;中间第一个＆＃34;和＃34;右边＃34; div高度不会拉伸以适合行中最大高度的元素。如何强迫他们自动伸展高度？我更喜欢纯CSS解决方案，但如果它可以处理非常非常大的表，则接受javascript（jquery）解决方案......

修改当然，使用浮动元素不是我的任务的方法，忘了它。我不喜欢实施，但这可能会更好地理解我想要的内容：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
div {vertical-align:top;margin:0px;padding:0px;}
div.table {display:inline-block;border:solid 2px green;background-color:red;}
div.table > div{display:inline-block;
max-height:8em;overflow:auto;
border:solid thin black;background-color:white;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
    $(document).ready(function () {
        $('<br />').insertAfter($("div.table > div:nth-child(3n+3)").not(':last'));
        $("div.table > div:nth-child(4n+1)").each(function () {
            $(this).css('width', '15em');
            if ($(this).height() < $(this).next('div').height() || $(this).height() < $(this).next('div').next('div').height()) {
                $(this).height(Math.max($(this).next('div').height(), $(this).next('div').next('div').height()));
            }
        });
        $("div.table > div:nth-child(4n+2)").each(function () {
            $(this).css('width', '10em');
            if ($(this).height() < $(this).prev('div').height() || $(this).height() < $(this).next('div').height()) {
                $(this).height(Math.max($(this).prev('div').height(), $(this).next('div').height()));
            }
        });
        $("div.table > div:nth-child(4n+3)").each(function () {
            $(this).css('width', '10em');
            if ($(this).height() < $(this).prev('div').height() || $(this).height() < $(this).prev('div').prev('div').height()) {
                $(this).height(Math.max($(this).prev('div').height(), $(this).prev('div').prev('div').height()));
            }
        });
    });
</script>
</head>
<body>
<div class="table">
<div>Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first</div><div>Middle first<br />Middle first<br />Middle first<br />Middle first<br />Middle first<br />Middle first<br />Middle first<br />Middle first<br />Middle first<br />longlonglonglonglonglonglonglonglonglong</div><div>Right first</div>
<div>Left second</div><div>Middle second Middle second Middle second<br />longlonglonglonglonglonglonglonglonglong</div><div>Right second</div>
</div>
</body>
</html>

缺点： 1.需要一堆丑陋的JS。 2.当存在滚动条或缩放页面时，会出现红色区域。它们在不同浏览器中有所不有人知道他们来自哪里???有可能摆脱它们吗？如果不是，我会尝试使用equalHeights jquery插件之类的东西 编辑2：
我找到了一个脚本来平衡一行中所有元素的高度，但我不会使用它，因为现在我意识到没有可以应用于大型表结构的脚本。 CSS Flexible Box Layout Module是一个解决方案，但主流浏览器目前不支持它，并且渲染速度比普通表慢得多。

Answer 1

这只是一个建议，但不推荐

使用CSS display: table, display: table-row and display: table-cell

Demo Page

有没有办法使用非表标记创建一个表格结构？

1 个答案: