html - 部分子元素不影响父元素的高度-6ren

html - 部分子元素不影响父元素的高度

转载作者：太空宇宙更新时间：2023-11-04 14:05:11

我正在为我的大学进行设计，但遇到了这个特殊问题:<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;
}

如你所见，我有一个 block ，.middle ，包含左侧部分，left-column和右边的部分，.right-column .

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

所以我尝试使用 CSS3 display: table; , display: table-row;和 display: table-column;特性。它以某种方式帮助了我。一点点。我已尝试对我当前的问题应用相同的更改，但它似乎不起作用。所以，我决定尝试 <div>方法。问题在于 <div> ，包含标签及其输入的大小不按最大子高度( <textarea> 比 <label> 大得多，但容器的高度与标签的高度一样大)。

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

为什么会发生“高度计算错误”，我该如何预防？
我应该如何进行布局以使我的代码现代、简单到愚蠢 (KISS) 并且响应迅速？

最佳答案

why do things like that "miscalculation of the height" happen and how to prevent them?

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

不过，简而言之，当您 float 一个元素时，您会将其从文档流中移除。当(非 float )容器中的所有元素都 float 时，父级认为它没有任何子级，因此崩溃。有几种方法可以解决此问题:

设置overflow: hidden在父容器上(这仅在容器没有指定高度时才有效)
添加clear: both到父容器内 float 元素之后的一个元素(这很有效，但如果您专门为此目的添加元素，可能会添加额外的标记)
利用 :after 的力量伪元素(这只适用于支持它的浏览器；好消息是大多数浏览器都支持，尽管可能需要 polyfill)。

how i should do the layout of the elements to get my code modern, stupidly simple (KISS) and yet responsive?

据我所见，您所做的许多事情使您的工作变得比必要的更困难。在我看来，您缺少一些基本知识。

您可能想要更多地了解语义标记。您正在经历我们在行业中所说的“divitis”。也就是说，您将东西包装在 <div> 中可能更适合其他元素的标签。

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

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

您也不应该需要六个选择器长的 CSS 选择器链。看看如何CSS and specificity works ，否则您将在不久的将来导致自己偏头痛。

我建议拿起Dan Cederholm's Handcrafted CSS and Bulletproof Web Design , 以及细读 A List Apart和 CSS-Tricks ，以便在基础层面更好地掌握 CSS 和 HTML。

关于html - 部分子元素不影响父元素的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13885723/

文章推荐： HTML，如何检查是否看到 DIV(未溢出)？

文章推荐： C++数据结构代替数据库

文章推荐： c++ - Boost::python - 在 python 类的对象上填充指针的 C++ vector

文章推荐： html - 自适应 svg 背景

javascript - 元素 = $(元素);对象预期错误？
在开发中的网页上，我在 IE 上遇到此错误 element = $(element); 此代码位于prototype.js 预期对象如何消除此错误。更新: 现场也使用了 jQuery。最佳答
arrays - 如果元素本身是数组，合并两个数组(元素 + 元素)的最佳方法是什么
我有两个大小相同的嵌套数组: Array1 =[[1, 2], [], [2, 3]] Array2= [[1, 4], [8, 11], [3, 6]] 我需要将它们合并到一个数组中，如下所示: A
jQuery 不适用于
元素，但不适用于元素
我有一些 jQuery 代码，当单击具有特定 ID 的项目时运行。当 ID 是的一部分时，它就可以工作。元素，但当它位于中时则不然元素。为什么会这样呢？我想使用 an，因为如果用户关闭了 Ja
html - 如何制作 flex 元素 block 元素？
Flex-box 规范 3声明 flex 元素不是 block 容器: A flex item establishes a new formatting context for its content
javascript - jquery 在有序堆栈中添加 not-in-dom 元素(in-dom 元素)
我遇到了一个意想不到的问题。 HTML JS $(function() { var $divs = $('.myDiv'); // create new div not in
javascript - 制作
元素 'active' 而不是元素
我使用 Bootstrap 和 Ember.js 得到了一个无序列表。每个列表项都是一个显示新帖子的链接，每当您单击该链接时，Ember 都会添加类 active默认情况下。我正在使用 Bootstr
javascript - 循环遍历 DOM 元素，包括 span 元素
我正在尝试让一个函数正常工作，但运气不佳，所以我想向 Stackoverflow 智囊团提出一个新手问题! 基本上，我有一个表单，并且循环遍历所有元素以查看是否存在自定义数据属性。如果存在，则保持该元
arrays - 是否有内置函数来映射非 nil 元素，并删除数组的 nil 元素？
我想映射一个可选数组，删除那些 nil 值，并使用另一个函数映射非 nil 值。我知道我可以通过使用 compactMap 然后使用常规 map 来实现这一点，但我只想遍历数组一次。我为此实现了一
jquery - 定位 li 元素，除非前面有非 li 元素
我如何定位 li 元素，除非它们出现在之后元素？换句话说，我想针对步骤而不是注释。我尝试向 OL 添加一个我想从选择中排除的类，但我想出的代码不起作用。 (顺便说一句，重构 html 不是一种选
asp.net - 元素 > system.webServer' 有无效的子元素 > 元素 'rewrite'
Warning 1 The element 'system.webServer' has invalid child element 'rewrite'. List of possible eleme
JavaScript 从非结束节点 HTML 元素(例如 LI 元素)获取文本值
我正在尝试编写一个脚本，该脚本将遍历 HTML 源并创建 DOM 的 JSON 文件，然后使用 d3.js 在 TreeView 中显示该文件。我遇到的问题是不仅希望显示元素(TITLE、P、LI 等
jQuery SlideUp 元素 A 如果可见，则 SlideDown 元素 B
我有以下 HTML 表单:- Option 1 Option 2
javascript - 选择 HTML 元素 Jquery 之后的下一个 span 元素
我试图在选定的 HTML 元素之后选择下一个具有类名 slider-value 的 span 元素。我尝试了多种解决方案，但没有一个有效。我可以通过 id 选择它，但我不希望那样做使代码冗余。 $(
javascript - innerHTML 适用于 body 元素，但不适用于 p 元素
如果电子邮件地址无效，我想在屏幕上显示一条消息“请输入有效的电子邮件地址”。 body 元素的innerHTML 语句工作正常，但我用于p 元素的innerHTML 语句不起作用。有一次，当我测试它
javascript - jQuery 显示隐藏的 li 元素，然后隐藏可见的 li 元素
以下 jQuery 代码调用 ul 元素，查找元素内的前三个 li 列表项，并隐藏剩余的 li 项目。然后，它附加一个 li 元素，其中显示“显示更多...”，并且在单击时显示之前隐藏的列表项。 (
html - 如何显示一个 h1 元素，旁边有一个内联元素，下面有一个 p 元素？
我问了a question早些时候关于将编辑/删除链接与 h1 元素内联的最佳方法。我能够通过给出的答案实现这一点，但我现在有额外的要求，我需要在 h1 下方显示一个段落并编辑/删除链接。到目前为止
knockout.js foreach 在表中重复 td 元素，但不重复 tr 元素
我使用 MVC 4 和 knockout.js 库版本 2.1.0 显示从服务器检索到的大量文件的表中的以下摘录。 0)"> 正在正确检索数据，
reactjs - 如何在 React 组件中定位 DOM 元素，或者应该避免一起定位 DOM 元素？
我创建了一个脚本，该脚本在鼠标悬停在父容器上时激活，并且应该将其子元素移离鼠标。我目前已经让它工作了，但是代码的某些部分似乎与 REACT 代码应该是什么样子相矛盾。特别是两个部分。我在渲染函数中使
javascript - 断点不适用于 Button 或 div 元素，但适用于 li 元素
我是 JS 新手，正在尝试理解项目 https://github.com/tastejs/todomvc 的代码请参阅屏幕截图，我尝试对 button X 以及其父元素 div 设置断点，但在这两种
html - 检查哪些样式应用于 MVC 5 元素 View 中的 HTML 元素
例如，假设有一个带有奇特颜色的标记: Something written here 使用 Visual Studio 2017 和 MVC 5 元素，有没有办法检查和定位当前应用了哪些样式，以及负责它

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 部分子元素不影响父元素的高度