Question

上周我一直在学习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;
}

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

提前致谢！

Answer 1

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）class和id都可以工作，但css通常首选类。在下面的小提琴中，我已将其更改为ID，以确保布局不会发生变化。

3）＆＃39;＃navi＆＃39;是指列表本身，而“#navi li＆＃39;指列表中的每个列表项。

FIDDLE DEMO

Answer 2

如果您希望两个元素的高度始终相同，即使您更改了内部文本的数量，也可以使用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（调整浏览器窗口以查看其工作情况）

Answer 3

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

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

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

如果项目是响应式的，您可以这样调用它：

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

或使用setInterval，如：

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

Answer 4

以下是使用CSS table-cells 的一种方法。

按如下方式修改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以获得每个单元格周围10px的水平间距。这也会影响工作台的整体宽度，因此两个单元格比预期的要窄一些。

要解决此问题，请将.main-wrap宽度设置为980px，即宽度.container加上细胞间距为10px的两倍。

结果是溢出情况，您可以使用overflow: hidden上的.container隐藏该情况。

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

（可选）在margin-bottom: 10px上使用.main-wrap在主要元素和页脚之间打开一些空白区域。

请参阅演示：http://jsfiddle.net/audetwebdesign/b8Fy7/

Answer 5

将eqh-parent类应用于父包装器并将eqh-child应用于其子项并在正文结束前粘贴脚本。此代码可重复使用，适用于chrome，FF，IE 8＆amp;上方。

<!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>

在不使用人造柱的情况下制作同样长的柱子

5 个答案: