在不使用假列的情况下制作同样长的列答案

【问题标题】：Making equally long columns without using faux columns在不使用假列的情况下制作同样长的列
【发布时间】：2014-05-23 11:08:01
【问题描述】：

上周我一直在学习 html 和 css，并且在开始一个真正的项目之前尝试了各种东西。

我一直在搞砸，这就是我目前所拥有的： http://jsfiddle.net/94ZDm/1/ http://jsfiddle.net/94ZDm/1/embedded/result/

<!doctype html>
<html>
<head>

    <title>My Website</title>

    <meta charset="utf-8" />

    <link href="css/style.css" type="text/css" rel="stylesheet"/>

</head>

<body>

<div class="container">

<div class="nav">
<ul id="navi">
    <li><a href="">Home</a></li>
    <li><a href="">News</a></li>
    <li><a href="">Archives</a></li>
    <li><a href="">Links</a></li>
    <li><a href="">About</a></li>
</ul>
</div>

<div class="main-wrap">
    <div class="main1"> 
    <h1 id="top"> Hello World!!! </h1>

        <p> First paragraph </p>

        <h2> Things I Must Do Today</h2>

            <ul>
                <li> <a href="http://google.be" target="_blank" id="externallink"> Go to the mall </a> </li>
                <li> Shop </li>
                <li> Get gas</li>
                <li> Drive home </li>
            </ul>

        <p><img src="img/koala.jpeg" alt="a koala sitting in a tree" align="left"/>

            Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!</p>

        <p> Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!</p>

        <p> Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!</p>

        <p> Text a lot of text! Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!
            Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!Text a lot of text!</p>

        <p><a href="#top">Top</a></p>
    </div>
    <div class="main2"> 
        <p> extra navigation... </p>
    </div>
</div>

<footer>
    &copy; Copyright Blabla Land 2014
</footer>

</div>

</body>
</html>

.

 * {
-webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
      box-sizing: border-box;
}

body {
font-family: Arial, Verdana, sans-serif;
background: green;
}

.container {
width:960px;
margin:0 auto;
}

.main-wrap {
overflow: hidden;
}

.nav {
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
background-color: #efefef;
border: 2px solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

.main1 {
float: left;
width: 652px;
margin-bottom: 10px;
padding: 10px;
background-color: #efefef;
border: 2px solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

.main2 {
float: right;
width: 288px;
min-height: 1000px;
margin-bottom: 10px;
padding: 10px;
background-color: #efefef;
border: 2px solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
} 

footer {
padding: 10px;
background-color: #efefef;
border: 2px solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

text-align: center;
}

#navi li {
display: inline-block;
list-style-type: none;
margin-right: 25px;
}

#navi {
text-align: center;
}

a:link {
color: black; 
text-decoration: none;
}

a:visited {
color:black;
}

a:hover {
color: #229944;
text-decoration: underline;
}

a:active {
color:red;
}

#externallink {
text-decoration: underline;
}

img {
padding: 10px;
}

如何在不使用假列的情况下使我的内容列等长（正确的列应该与主列一样长）？假列会阻止我使用当前布局？我也不想使用指定的高度，它必须自动适应内容。

提前致谢！

【问题讨论】：

一篇文章中有太多不同的问题。请限制自己一次回答一个问题。
对不起，不知道。编辑了我的帖子。干杯！
我没有看到编辑，所以我在下面的回答包括对你所有 3 个问题的回答。

标签： html css two-columns

【解决方案1】：

这是使用 CSS 表格单元格的一种方法。

修改CSS如下：

.container {
    width:960px;
    margin:0 auto;
    overflow: hidden;
}
.main-wrap {
    display: table;
    width: 980px; /* Container width + 2 x 10px */
    margin-bottom: 10px;
    border: 1px dotted red;
    border-spacing: 10px 0;
}
.nav {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #efefef;
    border: 2px solid;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}
.main1 {
    display: table-cell;
    width: 652px;
    padding: 10px;
    background-color: #efefef;
    border: 2px solid;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}
.main2 {
    display: table-cell;
    width: 288px;
    padding: 10px;
    background-color: #efefef;
    border: 2px solid;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}

对于.main-wrap，应用display: table，然后对这两个应用display: table-cell 子元素.main1 和.main2。

默认情况下，两个子元素将缩放到两个高度中较大的一个。

要获得.main1 和.main2 之间的间距，请应用border-spacing: 10px 0 以在每个单元格周围获得10 像素的水平间距。这也会影响表格的整体宽度，因此两个单元格比预期的要窄一些。

要解决这个问题，将.main-wrap的宽度设置为980px，即.container的宽度加上单元格间距 10px 的两倍。

结果是溢出条件，您可以在.container 上使用overflow: hidden 隐藏它。

最后，应用margin-left: -10px来调整表格的居中。

或者，在.main-wrap 上使用margin-bottom: 10px 在主要元素和页脚之间打开一些空白。

查看演示：http://jsfiddle.net/audetwebdesign/b8Fy7/

【讨论】：

您好，只是想说声谢谢。这帮助很大！一步一步地做所有的事情，这样我会记得更好。再次感谢。

【解决方案2】：

1) 要使列的长度相等，请将容器的宽度更改为每列宽度的两倍。将第二列的宽度设置为与第一列相同。如果您希望它们自动设置高度，请不要指定它。 (

#container {
width:1304px;
margin:0 auto;
}

#main2 {
float: right;
width: 652px;
margin-bottom: 10px;
padding: 10px;
background-color: #efefef;
border: 2px solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

2) 类和 id 都有效，但类通常是 css 的首选。在下面的小提琴中，我将其更改为 ids 只是为了确保布局不会改变。

3) '#navi' 指的是列表本身，而 '#navi li' 指的是列表中的每个列表项。

FIDDLE DEMO

【讨论】：

您好，谢谢您的回答，绝对有帮助！干杯。

【解决方案3】：

您也可以使用 jQuery 动态更改它们的高度，如果您希望两个元素始终保持相同的高度，即使您更改了内部文本的数量。

类似这样的：http://jsfiddle.net/7TjfF/2/

jQuery(document).ready(function(){
    $hi1 = jQuery('#id1').height();
    $hi2 = jQuery('#id2').height();

    jQuery('#id2').css('min-height', $hi1);
    jQuery('#id1').css('min-height', $hi2);
});

以下是在网站上实现类似功能时的工作方式：http://nidrax.eu/pl/about.php（调整浏览器窗口大小以查看其工作）

【讨论】：

看起来很有趣，谢谢 Nidrax。一旦我接触到javascript，我会调查它。现在我停留在我也可以完全理解的东西上。干杯！

【解决方案4】：

最简单的方法，你可以使用我的插件：https://github.com/Masquerade-Circus/simpleEqualize.js。

只需将其添加到您的项目中并像这样调用它。

$(".main-wrap").simpleEqualize(true, 'div');

如果项目是响应式的，你可以这样称呼它：

$(window).resize(function(){
    $(".main-wrap").simpleEqualize(true, 'div');
});

或者使用 setInterval 类似：

setInterval(function(){
    $(".main-wrap").simpleEqualize(true, 'div');
},100);

【讨论】：

我认为这是 javascript 或类似的东西？我还没有到那里，但是当我开始学习它时会很快尝试一下。谢谢。

【解决方案5】：

将 eqh-parent 类应用于父包装，将 eqh-child 应用于其子类，并在正文结束之前粘贴脚本。此代码可重复使用，适用于 chrome、FF、IE 8 及更高版本。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Faux Columns</title>
    <style>
    .eqh-parent .eqh-child{
        background: #efefef;
        margin-bottom: 30px;
        border-right: 1px solid #ccc;
        padding: 0 30px;
    }
    .eqh-child:last-child{
        border-right: none;
    }
    body{
        padding: 30px 0px;
    }
    </style>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <!--[if lt IE 9]>
        <script type="text/javascript" src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <h3 align="center">Faux Columns</h3>
        <div class="row eqh-parent">
            <div class="eqh-child col-xs-12 col-sm-3">
                <p>
                    Built on the trusted foundation of VMware vCloud- Air. Built.io customers now benefit from Mobile Backend-as-a-Service delivered via a pre-approved IT environment that meets enterprise requirements for compliance, security and SLAs through dedicated Built.io.
                </p>
            </div>
            <div class="eqh-child col-xs-12 col-sm-3">
                <p>
                    AppGyver enables rapid, multi-platform development with tools for non-technical business users and developers alike. By combining the intuitive nature of AppGyver with the power of Built.io's backend, the two companies have joined forces to enable users to build a robust application with an enterprise backend in minutes.
                </p>
            </div>
            <div class="eqh-child col-xs-12 col-sm-3">
                <p>
                    Xamarin is a major front-end player that lets developers create fully native apps for iOS and Android using C#. When combined with Built.io, developers get a complete, best-of-breed solution that allows them to rapidly build robust mobile and web applications powered by a platform built for enterprise.
                </p>
            </div>
            <div class="eqh-child col-xs-12 col-sm-3">
                <p>
                    Student developers at Berkeley's Center for Entrepreneurship & Technology built complex, feature rich apps on top of Built.io, for the 2015 University Mobile Challenge. These bright, young minds are finding new and exciting ways to innovate on top of Built.io's pre-built features, such as intelligent push notifications, geolocation and real-time updates.
                </p>
            </div>
        </div>
        <div class="row eqh-parent">
            <div class="eqh-child col-xs-12 col-sm-4">
                <p>
                    Built on the trusted foundation of VMware vCloud- Air. Built.io customers now benefit from Mobile Backend-as-a-Service delivered via a pre-approved IT environment that meets enterprise requirements for compliance, security and SLAs through dedicated Built.io.
                </p>
            </div>
            <div class="eqh-child col-xs-12 col-sm-4">
                <p>
                    AppGyver enables rapid, multi-platform development with tools for non-technical business users and developers alike. By combining the intuitive nature of AppGyver with the power of Built.io's backend, the two companies have joined forces to enable users to build a robust application with an enterprise backend in minutes.
                </p>
            </div>
            <div class="eqh-child col-xs-12 col-sm-4">
                <p>
                    Xamarin is a major front-end player that lets developers create fully native apps for iOS and Android using C#. When combined with Built.io, developers get a complete, best-of-breed solution that allows them to rapidly build robust mobile and web applications powered by a platform built for enterprise.
                </p>
            </div>
        </div>
        <div class="row eqh-parent">
            <div class="eqh-child col-xs-12 col-sm-6">
                <p>
                    Built on the trusted foundation of VMware vCloud- Air. Built.io customers now benefit from Mobile Backend-as-a-Service delivered via a pre-approved IT environment that meets enterprise requirements for compliance, security and SLAs through dedicated Built.io.
                </p>
            </div>
            <div class="eqh-child col-xs-12 col-sm-6">
                <p>
                    AppGyver enables rapid, multi-platform development with tools for non-technical business users and developers alike. By combining the intuitive nature of AppGyver with the power of Built.io's backend, the two companies have joined forces to enable users to build a robust application with an enterprise backend in minutes.
                </p>
            </div>
        </div>
        <div class="row eqh-parent">
            <div class="eqh-child col-xs-12">
                <p>
                    Built on the trusted foundation of VMware vCloud- Air. Built.io customers now benefit from Mobile Backend-as-a-Service delivered via a pre-approved IT environment that meets enterprise requirements for compliance, security and SLAs through dedicated Built.io.
                </p>
            </div>
        </div>
    </div>
    <script type="text/javascript">     
        function setEqualHeight(){
            if($('.eqh-parent').length){ // check if .eqh-parent is available on document 
                $('.eqh-parent').each(function(){
                    if($(this).children().outerWidth() == $(this).width()){
                        $(this).children('.eqh-child').css('min-height', 0);
                    }
                    else{
                        $(this).children('.eqh-child').css('min-height', 0);
                        var large = $(this).children('.eqh-child').map(function(){
                            return $(this).height();
                        });
                        $(this).children('.eqh-child').css('min-height', large.sort(function(a, b){return b-a})[0]); // sort array in desc order and pick first element to get heighest element within array.
                    }
                });
            }
        }

        $(window).on('resize', function(){
            setEqualHeight();
        });

        $(document).ready(function(){
            setTimeout(function(){
                setEqualHeight();
            }, 100);
        });
    </script>
</body>
</html>

【讨论】：