Fatal编程技术网
  • javascript/
  • Javascript 有没有一种方法可以使用非表标记创建一个看起来像表的结构？

Javascript 有没有一种方法可以使用非表标记创建一个看起来像表的结构？

javascript jquery css

Javascript 有没有一种方法可以使用非表标记创建一个看起来像表的结构？,javascript,jquery,css,css-float,Javascript,Jquery,Css,Css Float,我正在尝试使用框大小：border-box；浮动：左元素 警告1。也许我的方法不好，甚至可能不需要使用“float”和“box size”属性来完成此任务，那么在这种情况下您会怎么做？ 警告2。当然，您应该记住，必须使用支持CSS3的现代浏览器来查看此标记：） div{ 垂直对齐：顶部； 边际：0px； 填充：0px； } 分区表{ 边框：实心2倍绿色； 宽度：90%； 背景色：红色； } div.table>div:not（.clear） { -moz框大小：边框框； 框大小：边框框； 浮动

我正在尝试使用
框大小：border-box；浮动：左
元素

警告1。也许我的方法不好，甚至可能不需要使用“float”和“box size”属性来完成此任务，那么在这种情况下您会怎么做？ 警告2。当然，您应该记住，必须使用支持CSS3的现代浏览器来查看此标记：）


div{
垂直对齐：顶部；
边际：0px；
填充：0px；
}
分区表{
边框：实心2倍绿色；
宽度：90%；
背景色：红色；
}
div.table>div:not（.clear）
{
-moz框大小：边框框；
框大小：边框框；
浮动：左；
最大高度：8em；
溢出：自动；
边框：实心薄黑色；
背景色：白色；
}
div.table>div:n子级（3n+1）：未（.clear）
{
清除：左；
宽度：40%；
}
div.table>div:n子级（3n+2）：未（.clear），div.table>div:n子级（3n+3）：未（.clear）{宽度：30%；}
div.clear{clear:两者；高度：0px；边框样式：无；}
左首
左首
左首
左首
左首
左首
左首
左首
左首
左首

中间优先
首先
左二
中秒
右二
你可以看到红色区域，它显示“中间优先”和“右优先”的divs高度没有延伸到适合行中最大高度的元素。如何强制它们自动拉伸其高度？我更喜欢纯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>


div{垂直对齐：顶部；边距：0px；填充：0px；}
div.table{显示：内联块；边框：实心2px绿色；背景色：红色；}
div.table>div{display:内联块；
最大高度：8em；溢出：自动；
边框：纯黑色；背景色：白色；}
$（文档）.ready（函数（）{
$（“
”）.insertAfter（$（“div.table>div:nth child（3n+3）”）.not（“：last”）；
$（“div.table>div:n个子项（4n+1）”）。每个（函数（）{
$（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:n子级（4n+2）”）。每个（函数（）{
$（this.css（'width'，'10em'）；
如果（$（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:n子级（4n+3）”）。每个（函数（）{
$（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（））；
}
});
});
左首
左首
左首
左首
左首
左首
左首
左首
左首
左首中首
中首
中首
中首
中首
中首
中首
/>龙龙争右
左次中次中次中次中次中次长右次长
缺点： 1.需要一堆丑陋的JS。 2.当出现滚动条或缩放页面时，会出现红色区域。它们在不同的浏览器中有所不同。有人知道他们来自哪里吗？？？有可能摆脱他们吗？如果没有，我将尝试使用equalHeights jquery插件之类的工具
编辑2:
我发现了一个脚本，它均衡了一行中所有元素的高度，但我不会使用它，因为现在我意识到，没有脚本可以应用于大型表式结构。
CSS Flexible Box Layout Module是一个解决方案，但目前主要浏览器不支持它，而且呈现速度比普通表格慢得多。

这只是一个建议，而不是建议

使用

这只是一个建议，而不是建议

使用

你为什么要重新发明轮子？如果你需要一个表格，那么就使用表格…BW：我想说的是，你需要为每一行添加一个额外的包装器，或者至少对每一行中的第一项进行一些标识。表格标记负担不起在页面的源代码中轻松添加内容。你在说什么，什么轮子？如果这个“轮子”已经发明了，那么就给它看看这个轮子：
Content
你为什么要重新发明轮子？如果你需要一个表，那么就使用table…BW：我想说，你需要为每一行添加一个包装器，或者至少对第一行进行一些标识 
<!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>