1

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

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

提前致谢！

4

5 回答 5

0

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' 指的是列表中的每个列表项。

小提琴演示

于 2014-05-23T11:35:32.303 回答
0

您还可以使用 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（调整浏览器窗口大小以查看其工作）

于 2014-05-23T11:57:06.820 回答
0

最简单的方法，你可以使用我的插件：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);
于 2014-05-23T12:12:12.237 回答
0

这是使用 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;
}

for .main-wrap， apply display: table，然后display: table-cell是两个子元素.main1and .main2。

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

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

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

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

最后，申请margin-left: -10px调整表格的居中。

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

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

于 2014-05-23T12:47:47.127 回答
0

将 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>
于 2015-07-27T11:53:59.163 回答