html - 一部の子要素は親の高さに影響しません

Question

私は自分の大学のデザインを構築していますが、この独特の問題に遭遇しました:<div>要素の高さはその内部の影響を受けません.

これらのスクリーンショットを見てください。

外側の <code><div></code>

内側の <code><label></code>

内側の <code><textarea></code>

デモ

意味をなすために：テーブルを使用せずに（私にとって）複雑なものを構築しようとしています（CSSのみ-私たちは現代のWebエポックに住んでいます=））。これが私の目標です：

私が実装しようとしていること

長くて厄介な 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を含む1 つのブロックがあります。left-column.right-column

右側の列には、要素が 1 つだけ含まれています.content。しかし、そのコンテナーの要素は、再帰的にいくつかの列に分割できます ( 2 つの列が含まれ、そのうちの 1 つには 2 つの列が含まれ、そのうちの 1 つには 2 つの列が含まれます... )。

display: table;そこで、CSS3とプロパティdisplay: table-row;を使用しようとしました。display: table-column;どういうわけかそれは私を助けました。少し。現在の問題に同じ変更を適用しようとしましたが、うまくいかないようです。そこで、アプローチを試すことにしまし<div>た。これに関する問題は<div>、ラベルとその入力を含むが最大の子の高さによってサイズ変更されていないことです (<textarea>はよりもはるかに大きいです<label>が、コンテナーの高さはラベルの高さと同じです)。

この情報に基づいて、2 つの質問があります。

「身長の誤算」はなぜ起こるのか、どうすれば防げるのか？
コードをモダンで愚かなほどシンプル ( KISS ) でありながらレスポンシブにするには、レイアウトをどのように行う必要がありますか?

score 8 · Accepted Answer

なぜそのような「高さの誤算」が起こるのか、そしてそれらを防ぐ方法は？

floatこれは、コンテナ内のすべてのオブジェクトで使用しているためです。フロートは少し奇妙なので、このCSS-Tricksの記事を読むことをお勧めします。

つまり、要素をフロートさせると、ドキュメントフローから要素が削除されます。（フローティングされていない）コンテナ内のすべての要素がフロートされている場合、親は子がないと見なすため、折りたたまれます。これを修正する方法はいくつかあります。

親コンテナに設定overflow: hiddenします（これは、コンテナに指定された高さがない場合にのみ実際に機能します）
フロートされた要素の直後、親コンテナ内の要素に追加clear: bothします（これはうまく機能しますが、この目的のために特別に要素を追加すると、マークアップが追加される場合があります）
疑似要素の力を利用し:afterます（これは、疑似要素をサポートするブラウザーでのみ機能します。幸いなことに、ポリフィルが必要になる可能性はありますが、大多数が機能します）。

コードをモダンで、ばかげてシンプル（KISS）でありながら応答性を高めるために、要素のレイアウトをどのように行う必要がありますか？

私がここで見ることができることから、あなたはあなたの仕事を必要以上に難しくしている多くのことをしている。あなたはいくつかの基本を見逃しているように私には思えます。

セマンティックマークアップについて詳しく調べたいと思うかもしれません。あなたは私たちが業界で「divitis」と呼んでいるものを経験しています。つまり、<div>他の要素により適していると思われるタグで物事をラップしているということです。

たとえば、使用するすべての場所で<div class="item">、順序付けされていないリスト（<ul>）に変更でき、各「アイテム」はリストアイテム（<li>）です。これにより、クラスを絶対にすべてにアタッチする必要がなくなります。

さらに、ボタンで車輪の再発明をする必要はありません。input type=buttonと要素の両方があり<button>ます。form.submitこれらのいずれかを使用すると、（再作成する代わりに）フックできるアクションが開きます。

また、半ダースのセレクターの長さのCSSセレクターのチェーンは必要ありません。CSSと特異性がどのように機能するかを見てください。そうしないと、比較的近い将来に片頭痛を引き起こすことになります。

基本的なレベルでCSSとHTMLをよりよく理解するために、Dan Cederholmの手作りCSSと防弾Webデザインを手に入れ、 A ListApartとCSS-Tricksを熟読することをお勧めします。

score 1 · Accepted Answer

使ってみて

.input { overflow: hidden }

それはあなたの問題を解決するかもしれません。別の要素の中にフローティング要素がある場合、子要素が「フローティング」であるため、この親の高さが損なわれます

html - 一部の子要素は親の高さに影響しません

2 に答える 2

Related

Reference