HTML/CSS：使两个浮动div的高度相同_Html_Css_Html Table

HTML/CSS：使两个浮动div的高度相同

html css

HTML/CSS：使两个浮动div的高度相同,html,css,html-table,Html,Css,Html Table,我有一个小问题，我现在用表解决，见下文。基本上，我想让两个div占据100%的可用宽度，但只占所需的垂直空间（从图片上看这并不是很明显）。如图所示，两者的高度应始终完全相同，中间有一条小线（来源：）使用表，这一切都很容易做到，我目前正在做这件事。但是，我对解决方案不太感兴趣，因为从语义上讲，这实际上不是一个表。这是CSS中的一个经典问题。没有一个真正的解决办法这是一本关于这个问题的好书。它使用了一种称为“人造柱”的技术，其基础是在包含柱的元素上有一个垂直平铺的背景图像，从而产生等长柱的错

我有一个小问题，我现在用

表解决，见下文。基本上，我想让两个div占据100%的可用宽度，但只占所需的垂直空间（从图片上看这并不是很明显）。如图所示，两者的高度应始终完全相同，中间有一条小线


（来源：）
使用表
，这一切都很容易做到，我目前正在做这件事。但是，我对解决方案不太感兴趣，因为从语义上讲，这实际上不是一个表。
这是CSS中的一个经典问题。没有一个真正的解决办法
这是一本关于这个问题的好书。它使用了一种称为“人造柱”的技术，其基础是在包含柱的元素上有一个垂直平铺的背景图像，从而产生等长柱的错觉。因为它位于浮动元素的包装器上，所以它与最长的元素一样长

A-List-Apart的编辑在文章中有这样的注释：
编辑们的一个提示：尽管这篇文章在当时非常优秀，但它可能没有反映现代最佳实践
这项技术需要完全静态的宽度设计，而这种设计不能很好地与目前流行的跨设备站点的液体布局和响应性设计技术配合使用。但是，对于静态宽度站点，这是一个可靠的选择。
这在IE 7、FF 3.5、Chrome 3b、Safari 4（Windows）中适用
如果取消注释底部更清晰的div，也可以在IE6中使用。
编辑：正如娜塔莉·唐恩所说，您只需添加宽度：100%改为#容器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <style type="text/css">
        #container {
            overflow: hidden;
            border: 1px solid black;
            background-color: red;
        }
        #left-col {
            float: left;
            width: 50%;
            background-color: white;
        }
        #right-col {
            float: left;
            width: 50%;
            margin-right: -1px; /* Thank you IE */
        }
    </style>
</head>
<body>
    <div id='container'>
        <div id='left-col'>
            Test content<br />
            longer
        </div>
        <div id='right-col'>
            Test content
        </div>
        <!--div style='clear: both;'></div-->
    </div>
</body>
</html>


#容器{
溢出：隐藏；
边框：1px纯黑；
背景色：红色；
}
#左列{
浮动：左；
宽度：50%；
背景色：白色；
}
#右柱{
浮动：左；
宽度：50%；
右边距：-1px；/*谢谢IE*/
}
测试内容

比较长的
测试内容

如果div不是固定高度，我不知道如何将文本垂直居中于右侧div。如果是，您可以将行高设置为与div高度相同的值，并将包含文本的内部div设置为display:inline；行高：110%
据我所知，使用当前的CSS实现无法做到这一点。要生成两列等高ed，您需要JS。
您可以在CSS中通过应用大量底部填充、相同数量的底部负边距并用隐藏溢出的div包围这些列来获得等高列。垂直居中文本有点棘手，但这应该有助于您的方式

#容器{
溢出：隐藏；
宽度：100%；
}
#左列{
浮动：左；
宽度：50%；
背景颜色：橙色；
垫底：500em；
边缘底部：-500em；
}
#右柱{
浮动：左；
宽度：50%；
右边距：-1px；/*谢谢IE*/
左边框：1px纯黑；
背景色：红色；
垫底：500em；
边缘底部：-500em；
}

测试内容
更长的
测试内容
现在是2012+n年，因此如果您不再关心IE6/7，显示：表格
，显示：表格行
和显示：表格单元格
适用于所有现代浏览器：

更新2016-06-17:如果您认为是时候使用显示：flex
，请查看。
我也有类似的问题，我认为最好的选择是只使用一点javascript或jquery
通过获取最高的div值并将该值应用于所有其他div，可以使想要的div具有相同的高度。如果您有许多div和许多解决方案，我建议您编写一些advancejs代码，找出所有div中哪一个最高，然后使用它的价值
使用jquery和2个div非常简单，下面是示例代码：
$（'.small div'）.css（'height'，$（'.higher div'）.css（'height'））；

最后，还有最后一件事。
它们的填充物（顶部和底部）必须相同！如果其中一个有较大的填充，则需要消除填充差异
 您可以通过js实现这一点：
<script>
    $(document).ready(function() {
        var height = Math.max($("#left").height(), $("#right").height());
        $("#left").height(height);
        $("#right").height(height);
    });
</script>


$（文档）.ready（函数（）{
var height=Math.max（$（“#左”）.height（），$（“#右”）.height（）；
$（“#左”）。高度（高度）；
$（“#右”）。高度（高度）；
});
使用Javascript，可以使两个div标记具有相同的高度。使用如下代码，较小的div将调整为与最高的div标签相同的高度：
var rightHeight = document.getElementById('right').clientHeight;
var leftHeight = document.getElementById('left').clientHeight;
if (leftHeight > rightHeight) {
document.getElementById('right').style.height=leftHeight+'px';
} else {
document.getElementById('left').style.height=rightHeight+'px';
}

“left”和“right”是div标记的id
 使用JS，在所有要具有相同高度的元素中使用data same height=“group\u name”

例如：

守则：
$(document).ready(function() {
    var equalize = function () {
        var disableOnMaxWidth = 0; // 767 for bootstrap

        var grouped = {};
        var elements = $('*[data-same-height]');

        elements.each(function () {
            var el = $(this);
            var id = el.attr('data-same-height');

            if (!grouped[id]) {
                grouped[id] = [];
            }

            grouped[id].push(el);
        });

        $.each(grouped, function (key) {
            var elements = $('*[data-same-height="' + key + '"]');

            elements.css('height', '');

            var winWidth = $(window).width();

            if (winWidth <= disableOnMaxWidth) {
                return;
            }

            var maxHeight = 0;

            elements.each(function () {
                var eleq = $(this);
                maxHeight = Math.max(eleq.height(), maxHeight);
            });

            elements.css('height', maxHeight + "px");
        });
    };

    var timeout = null;

    $(window).resize(function () {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }

        timeout = setTimeout(equalize, 250);
    });
    equalize();
});

$（文档）.ready（函数（）{
var均衡器=函数（）{
var disableOnMaxWidth=0；//767用于引导
var={}；
变量元素=$（'*[数据相同高度]）；
元素。每个（函数（）{
var el=$（本）；
var id=el.attr（‘数据相同高度’）；
如果（！已分组[id]）{
分组[id]=[]；
}
分组[id]。推送（el）；
});
$。每个（分组，功能（键）{
变量元素=$（'*[data same height=“'+key+'”）；
元素css（'height'，''）；
var winWidth=$（window.width（）；
如果（winWidth您应该使用flexbox来实现这一点。IE8和IE9不支持它，IE10中只支持-ms前缀，但所有其他浏览器都支持它。对于供应商前缀，您也应该使用
通过使用css属性-
.parent {
    display: flex;
    flex-wrap: wrap; // allow wrapping items
}

.child {
    flex-grow: 1;
    flex-basis: 50%; // 50% for two in a row, 33% three in a row etc.
}

<div id="ven">
<section>some content</section>
<section>some content</section>
</div>

#ven {
height: 100%;
}
#ven section {
width: 50%;
float: left;
height: 100%;
}

.parent {
    display: flex;
    flex-wrap: wrap;
}

.child {
 // flex: flex-grow flex-shrink flex-basis;
    flex: 1 0 50%;
}