Question

我正在为我的大学设计一个设计，但遇到了这个特殊的问题：<div>元素的高度不受其内部的影响。

看看这些截图：

the outer <code><div></code>

the inner <code><label></code>

the inner <code><textarea></code>

demo

只是为了说明一点：我正在尝试构建一些复杂的东西（对我而言）而不使用表格（只有CSS - 我们生活在一个现代的网络时代虽然=））。这是我的目标：

what i am trying to implement

我有一些冗长而混乱的HTML和CSS代码 - 我真的不是设计师。这是：

HTML：

<html>
    <head>
        <title>verstka</title>

        <link rel="stylesheet" type="text/css" href="verstka.css" media="all" />
    </head>

    <body>
        <div class="top">
            <div class="header angled-stripes">
                <div class="logo"></div>

                <div class="right-menu">
                    <div class="quick-links links">
                        <div class="item">
                            <a href="/">Home</a>
                        </div>

                        <div class="item">
                            <a href="/">Login</a>
                        </div>

                        <div class="item">
                            <span>Sitemap</span>
                        </div>
                    </div>

                    <div class="quick-search">
                        <form action="" method="get" onsubmit="javascript:void(0);">
                            <input type="text" name="q" size="20" />
                            <a href="/" onclick="return false;" class="button">search</a>
                        </form>
                    </div>
                </div>
            </div>

            <div class="top-menu">
                <div class="item">
                    <a href="/" class="products">Products</a>
                </div>

                <div class="item">
                    <a href="/" class="download">Download</a>
                </div>

                <div class="item">
                    <a href="/" class="support">Support</a>
                </div>

                <div class="item">
                    <a href="/" class="contacts">Contacts</a>
                </div>
            </div>
        </div>

        <div class="middle table-positioning">
            <div class="row-positioning">
                <div class="left-column">
                    <div class="content">
                        <div class="block product angled-stripes">
                            <div class="title">BASIC Package</div>

                            <div class="body">
                                <img src="product-green.png" />

                                <span>blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah</span>

                                <div class="links">
                                    <a href="/" class="item">Details</a>
                                    <a href="/" class="item">Download</a>
                                </div>

                                <a href="/" class="button">purchase now</a>
                            </div>

                            <div class="clearer"></div>
                        </div>

                        <div class="block product angled-stripes">
                            <div class="title">FULL Package</div>

                            <div class="body">
                                <span>lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</span>
                                <div class="links">
                                    <a href="/" class="item">Details</a>
                                    <a href="/" class="item">Download</a>
                                </div>

                                <a href="/" class="button">purchase now</a>
                            </div>

                            <div class="clearer"></div>
                        </div>

                        <div class="block plain">
                            <div class="title">Popular Products</div>

                            <ul class="green-arrow-markered">
                                <li>
                                    <a href="/">Set True Image 9.0</a>
                                </li>

                                <li>
                                    <a href="/">Standard Recorder 6.5</a>
                                </li>

                                <li>
                                    <a href="/">Disk Director Upgrade 4.56</a>
                                </li>

                                <li>
                                    <a href="/">ZippeNotes 6.22</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="footer">
                        &copy;<span class="bolder">Software Company</span>

                        <div class="links">
                            <a href="/" class="item">Privacy Policy</a>
                            <a href="/" class="item">Terms of Use</a>
                            <div class="clearer"></div>
                        </div>
                    </div>
                </div>

                <div class="right-column">
                    <div class="content">
                        <div class="post">
                            <div class="title green-title">Company Address</div>
                            <div class="image"><img src="company-photo.jpg" alt="company photo"></div>
                            <div class="content"></div>
                        </div>

                        <div class="post left-post">
                            <div class="title">Contact Form</div>

                            <form action="#" onsubmit="javascript:void(0);">
                                <div class="input">
                                    <label for="name">Your full name:</label>
                                    <input id="name" name="name" type="text" />
                                </div>

                                <div class="input">
                                    <label for="email">E-mail address:</label>
                                    <input id="email" name="email" type="text" />
                                </div>

                                <div class="input">
                                    <label for="phone">Your phone:</label>
                                    <input id="phone" name="phone" type="text" />
                                </div>

                                <div class="input">
                                    <label for="message">Your message</label>
                                    <textarea name="message" id="message" cols="30" rows="10"></textarea>
                                </div>

                                <input type="submit" />
                            </form>

                            <div class="row">
                                <a href="#" class="button">reset</a>
                                <a href="#" class="button">submit</a>
                            </div>
                        </div>

                        <div class="highlighted-block post">

                            <div class="title green-title">
                                <img src="newsletter" alt="newsletter icon" />

                                <div>
                                    <span class="uppercase">newsletter</span><br /><span class="sub-title">signup</span>
                                </div>
                            </div>

                            <div class="clearer"></div>

                            <form action="#" onsubmit="javascript:void(0);">
                                <label for="newsletter-name">Enter your name, please:</label>
                                <input id="newsletter-name" name="name" type="text" />

                                <label for="newsletter-email">Enter your e-mail, please:</label>
                                <input id="newsletter-email" name="email" type="text" />

                                <a href="#" class="button">subscribe now</a>
                            </form>

                            <div>
                                <strong>Note:</strong>
                                <span>lorem ipsum ololo!</span>
                            </div>
                        </div>

                        <div class="clearer"></div>
                    </div>

                    <div class="footer">
                        <div class="links">
                            <a href="#" class="item">Home</a>
                            <a href="#" class="item">Products</a>
                            <a href="#" class="item">Download</a>
                            <a href="#" class="item">Support</a>
                            <a href="#" class="item">Contacts</a>
                            <a href="#" class="item">Login</a>
                            <a href="#" class="item">Sitemap</a>
                            <div class="clearer"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bottom">
        </div>
    </body>
</html>

CSS：

html, body {
    margin: 0 0 80px 0;
    padding: 0;
    background-color: #313131;
    color: #fff;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 12px;
}

a, a:hover, a:visited {
    color: #fff;
}

/*.links .item:nth-child(n+2):before {
    content: '|';
}
*/

.links .item:nth-child(n+2) {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid #9C9C9C;
}

.links .item {
    color: #9c9c9c;
    float: left;
    display: inline-block;
}

.links a.item:visited {
    color: #9c9c9c;
}

.links a.item:hover {
    color: #9c9c9c;
}

.bolder {
    font-weight: bold;
}

.footer {
    color: #9c9c9c;
}

.middle .left-column .content .block.product:nth-child(n+1) {
    /*background: #8dc63f;*/
    background-color: #86bc3c;
    /*background-size: 25px 25px;*/
    /*box-shadow: 1px 1px 8px #77ad32;*/
}

.middle .left-column .content .block.product:nth-child(n+2) {
    /*background: #ee8911;*/
    background-color: #ee8911;
    /*background-size: 25px 25px;*/
    /*box-shadow: 1px 1px 8px #eb7e0e;*/
}

.middle .left-column .content .block.product .title {
    border-radius: 5px 5px 0 0;
    padding-left: 20px;
    text-shadow: 2px -1px 1px black;
    min-height: 40px;
    line-height: 40px;
    vertical-align: middle;
}

.middle .left-column .content .block.product:nth-child(n+1) .title {
    background: #6ce25d; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: -moz-linear-gradient(top,  #6ce25d 16%, #4ebb30 36%, #bee884 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(16%,#6ce25d), color-stop(36%,#4ebb30), color-stop(100%,#bee884)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #6ce25d 16%,#4ebb30 36%,#bee884 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #6ce25d 16%,#4ebb30 36%,#bee884 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #6ce25d 16%,#4ebb30 36%,#bee884 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #6ce25d 16%,#4ebb30 36%,#bee884 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ce25d', endColorstr='#bee884',GradientType=0 ); /* IE6-8 */
}

.middle .left-column .content .block.product:nth-child(n+2) .title {
    background: #db8a08; /* Old browsers */
    background: -moz-linear-gradient(top,  #db8a08 17%, #c76307 36%, #ef9366 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(17%,#db8a08), color-stop(36%,#c76307), color-stop(100%,#ef9366)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #db8a08 17%,#c76307 36%,#ef9366 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #db8a08 17%,#c76307 36%,#ef9366 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #db8a08 17%,#c76307 36%,#ef9366 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #db8a08 17%,#c76307 36%,#ef9366 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db8a08', endColorstr='#ef9366',GradientType=0 ); /* IE6-8 */
}

.middle .left-column .content .block .body .links .item:nth-child(n+2) {
    border-left-color: #fff;
}

.middle .left-column .content .block .body .links .item {
    color: #fff;
}

.middle .left-column .content .block.product .body img {
    width: 30%;
    float: left;
    margin: 10px;
}

.middle .left-column {
    width: 20%;
    max-height: 350px;
}

.middle .right-column {
    width: 65%;
}

.middle .right-column .content {
    background-color: #fff;
    border-radius: 5px;
    border: 3px solid #1c1c1c;
}

.top .header .quick-links .item {
    color: #fff;
}

.top .header {
    font-size: 10pt;
}

.top .header .right-menu {
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 20px;
}

.top .header .right-menu .quick-links {
    display: block;
    float: right;
    margin: 20px 0;
}

.top .header .right-menu .quick-search {
    display: block;
    height: 20px;
    line-height: 10px;
}

.top .header .right-menu .quick-search form {
    margin-right: -10px;
}

.top .header .right-menu .quick-search form * {
    display: inline-block;
    float: left;
    margin: 0 3px;
}

.button {
    color: #fff !important;
    text-transform: uppercase;
    display: inline-block;
    background-color: #a4dff2;
    border: 1px solid #027499;
    text-decoration: none;
    font-family: Arial;
    font-weight: bold;
    text-shadow: #17688d;
    font-size: 10pt !important;
    text-align: center;
    min-width: 70px;
    max-height: 20px;
    padding: 5px 5px;
    border-radius: 3px;
    text-shadow: 1px -1px 1px #000;

    background: #69ace0; /* Old browsers */
    background: -moz-linear-gradient(top,  #69ace0 14%, #207cca 38%, #7db9e8 66%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(14%,#69ace0), color-stop(38%,#207cca), color-stop(66%,#7db9e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #69ace0 14%,#207cca 38%,#7db9e8 66%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #69ace0 14%,#207cca 38%,#7db9e8 66%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #69ace0 14%,#207cca 38%,#7db9e8 66%); /* IE10+ */
    background: linear-gradient(to bottom,  #69ace0 14%,#207cca 38%,#7db9e8 66%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69ace0', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
}

.top {
    height: 220px;
}

.top .header {
    background-color: #09aad3;
    /*background-size: 25px 25px;*/
    box-shadow: 1px 1px 8px #0480a7;
    height: 115px;
}

.top .header .logo {
    width: 300px;
    height: 50px;
    margin: 20px 25px;
    border-radius: 6px;
    background-color: #027297;
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
}

.top {
    text-align: center;
}

.top .top-menu {
    display: block;
    height: 100px;
    text-align: center;
}

.top .top-menu .item {
    width: 190px;
    height: 100px;
    background-color: #363636;
    display: inline-block;
    margin: 0 -3px;
    vertical-align: middle;
    line-height: 50px;
    /*font-family: Arial;*/
    font-size: 14pt;
    border: 1px solid #000;
    border-radius: 4px;
}

.top .top-menu .item a {
    text-decoration: none;
}

.middle .left-column .content .block .body {
    margin: 10px;
}

.middle .left-column .content .block {
    /*padding: 10px;*/
    border-radius: 10px;
    width: 225px;
    max-width: 225px;
    font-size: 12px;
    margin: 7px;
    border: 3px solid #1b1b1b;
}

.middle .left-column .content .block.plain {
    background-color: #3f3f3f;
    padding: 10px;
    width: 205px;
}

.middle .left-column .content .block .title {
    font-size: 16pt;
}

.middle .left-column .content .block.plain ul {
}

.middle .left-column .footer {
    margin-left: 7px;
}

ul.green-arrow-markered {
    list-style: disc outside url("list-bullet.gif");
    padding-left: 15px;
}

.left-column {
    padding-left: 5px;
}

.clearer {
    clear: both;
}

.angled-stripes {
    /*
    background-color: #09aad3;
    box-shadow: 1px 1px 8px #0480a7;
    linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    */

    background-image: /* Safari 5 and earlier */
        -webkit-gradient(linear, 100% 100%, 0 0,
        color-stop(.25, rgba(255, 255, 255, 0.2)),
        color-stop(.25, rgba(255, 255, 255, 0)),
        color-stop(.5, rgba(255, 255, 255, 0)),
        color-stop(.5, rgba(255, 255, 255, 0.2)),
        color-stop(.75, rgba(255, 255, 255, 0.2)),
        color-stop(.75, rgba(255, 255, 255, 0)),
        color-stop(1, rgba(255, 255, 255, 0)));

    background-image:   /* Chrome and Webkit Nightly build */
        -webkit-linear-gradient(45deg,
        rgba(255, 255, 255, 0.2) 25%,
        rgba(255, 255, 255, 0) 25%,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        rgba(255, 255, 255, 0) 75%,
        rgba(255, 255, 255, 0) 100%
        );

    background-image:   /* Firefox */
        -moz-linear-gradient(45deg,
        rgba(255, 255, 255, 0.2) 25%,
        rgba(255, 255, 255, 0) 25%,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        rgba(255, 255, 255, 0) 75%,
        rgba(255, 255, 255, 0) 100%
        );

    background-image:   /* IE10 */
        -ms-linear-gradient(45deg,
        rgba(255, 255, 255, 0.2) 25%,
        rgba(255, 255, 255, 0) 25%,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        rgba(255, 255, 255, 0) 75%,
        rgba(255, 255, 255, 0) 100%
        );

    background-image:   /* opera 11+ */
        -o-linear-gradient(45deg,
        rgba(255, 255, 255, 0.2) 25%,
        rgba(255, 255, 255, 0) 25%,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        rgba(255, 255, 255, 0) 75%,
        rgba(255, 255, 255, 0) 100%
        );

    background-image:
        linear-gradient(45deg,
        rgba(255, 255, 255, 0.2) 25%,
        rgba(255, 255, 255, 0) 25%,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        rgba(255, 255, 255, 0) 75%,
        rgba(255, 255, 255, 0) 100%
        );

    background-size: 15px 15px;
    -moz-background-size: 15px 15px;
    -webkit-background-size: 15px 15px;
    -o-background-size: 15px 15px;
    -ms-background-size: 15px 15px;
}

input[type=submit], input[type=button] {
    display: none;
}

.middle {
    position: relative;
    width: 100%;
    margin: 0;
}

.middle .right-column {
    color: #000;
    width: 80%;
    position: absolute;
    top: 0;
}

.table-positioning {
    display: table;
    width: 100%;
}

.table-positioning .row-positioning {
    display: table-row;
    padding-left: 20px;
}

.table-positioning .row-positioning .cell-positioning {
    display: table-cell;
}

.middle .left-column, .middle .right-column {
    display: table-cell;
}

.middle .right-column .post .title {
    font-size: 16pt;
    color: #09aad3;
}

.green-title {
    color: #4ebb30 !important;
}

.blue-title {
    color: #09aad3 !important;
}

.uppercase {
    text-transform: uppercase;
}

.middle .right-column .post .title {
    padding: 10px 0;
    margin: 10px;
    border-bottom: 1px solid #bebebe;
}

.middle .right-column .post form input, .middle .right-column .post form label, .middle .right-column .post form textarea {
    display: block;
    width: 100%;
}

.middle .right-column .post form input[type=submit], .middle .right-column .post form input[type=button] {
    display: none;
}

.middle .right-column .post .image {
    display: inline-block;
    border: 1px solid #bebebe;
    border-radius: 4px;
    padding: 3px;
}

.middle .right-column .post .image img {
    border: none;
    min-width: 124px;
    min-height: 124px;
    width: 124px;
    height: 124px;
    max-width: 124px;
    max-height: 124px;
}

.middle .right-column .post .content {
    margin: 10px;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #bebebe;
}

.middle .right-column .post {
    padding: 0 20px;
}

.split-content {
    display: table;
}

.highlighted-block {
    border: 1px solid #bebebe;
    border-radius: 6px;
    background-color: #eeeeee;
    margin: 20px;
    min-height: 420px;
    width: 300px;
    float: right;
    display: inline-block;
}

.middle .right-column .left-post {
    float: left;
    display: inline-block;
    width: 500px;
}

.middle .right-column .left-post .row {
    clear: both;
    display: inline-block;
    float: right;
}

.highlighted-block img {
    display: inline-block;
    float: left;
}

.highlighted-block .title {
    display: block;
    height: 110px;
}

.highlighted-block .title div {
    display: inline-block;
}

.highlighted-block .title img {
    display: inline-block;
    float: left;
    width: 100px;
    margin: 10px;
    height: 100px;
}

.middle .right-column .post .button {
    float: right;
    margin-left: 10px;
}

.middle .right-column .cell-positioning.post {
    margin: 20px;
}

.cell-positioning.wider {
    width: 65%;
}

.middle .right-column .post .input {
    display: block;
    position: relative;
    margin: 10px;
    float: left;
    clear: both;
    width: 100%;
}

.middle .right-column .post .input * {
    display: inline-block !important;
    width: 50%;
}

.middle .right-column .post .input input, .middle .right-column .post .input textarea {
    position: absolute;
    right: 0;
}

.middle .right-column .footer .links {
    float: right;
    margin: 5px 10px;
}

如您所见，我有一个区块.middle，其中包含左侧部分left-column和右侧部分.right-column。

右栏只包含一个元素 - .content。但是该容器的元素可以递归地分成几列（它包含两列，其中一列包含两列，其中一列包含两列...... ）。

所以我尝试使用CSS3 display: table;，display: table-row;和display: table-column;属性。它以某种方式帮助了我。一点点。我试图对我当前的问题应用相同的更改，但它似乎没有工作。所以，我决定尝试 <div>方法。这个问题是包含标签及其输入的<div>没有根据最大子高度来调整（<textarea>远大于<label>，而是容器'高度和标签'one）一样大。

根据这些信息，我有两个问题：

为什么“错误计算高度”会发生，我该如何预防呢？
我应该如何进行布局以使我的代码变得现代，简单（KISS）而且反应灵敏？

Answer 1

为什么这样的事情会发生“错误计算高度”以及如何预防？

那是因为您在容器内的所有对象上使用float。花车有点奇怪，所以我建议阅读this CSS-Tricks article on them。

简而言之，当您浮动元素时，您将其从文档流中取出。当（非浮动的）容器中的所有元素都浮动时，父级认为它没有任何子级，因此会崩溃。有几种方法可以解决这个问题：

在父容器上设置overflow: hidden（这仅在容器没有指定高度时才有效）
在父容器内的浮动元素之后立即将clear: both添加到元素中（这样做效果很好，但如果为此专门添加元素，可能会添加额外的标记）
利用:after伪元素的强大功能（这仅适用于支持它的浏览器;好消息是大多数人都这样做，尽管可能需要填充）。

我应该如何进行元素的布局，以使我的代码变得现代，简单（KISS）并且响应迅速？

从我在这里看到的，你做了很多让你的工作比必要更困难的事情。在我看来，你错过了一些基本面。

您可能希望更多地了解语义标记。你正在经历我们在贸易中称之为“divitis”的东西。也就是说，你将事物包装在<div>标签中，这些标签可能更适合其他元素。

例如，您使用<div class="item">的每个地方，您都可以更改为无序列表（<ul>），每个“项目”都是一个列表项（<li>）。这样可以避免将类附加到绝对所有内容中。

此外，您不必使用按钮重新发明轮子。有input type=button和<button>元素。使用其中任何一个都会打开form.submit操作然后可以挂钩（而不是重新创建它）。

你也不应该需要长度为6个选择器的CSS选择器链。看看CSS and specificity works如何，或者你将在不久的将来引起偏头痛。

我建议选择Dan Cederholm's Handcrafted CSS and Bulletproof Web Design，并仔细阅读A List Apart和CSS-Tricks，以便更好地掌握基本级别的CSS和HTML。

Answer 2

尝试使用

.input { overflow: hidden }

它可以解决您的问题。当你在另一个浮动元素中有浮动元素时，这个父元素的高度会受到损害，因为子元素是＆＃34;浮动＆＃34;

某些子元素不会影响父级的高度

2 个答案: