Question

我目前有一套产品＆＃39; div包装容器内。这些产品div包含图像，标题和p文本。由于某种原因，p文本的长度正在改变父产品div的位置。以下是截图：https://gyazo.com/9504729541e6bee17a27e4121af3a1c9

p和h2元素都有0填充和边距。我会尽量保持我的代码尽可能少。

HTML：

<div id="content" class="wrapper">
    <div id="content-container">
         <div id="product-container">
                        <div class="product-wrapper">
                            <div id="product" class="unhidden">
                                <div class="image-container">
                                <img src="assets/home-bg.jpg" class="thumbnail">
                                </div>    
                                <div class="product-text">
                                    <h2>Mexican Nachos - £6.99</h2>
                                    <p>Tortilla chips and melted cheese with the option of salsa, jalapenos, ground meat, guacamole and tomatoes.</p>
                                </div>
                            </div>

                            <div id="product" class="unhidden">
                                <div class="image-container">
                                <img src="assets/enchilada.jpg" class="thumbnail">
                                </div>    
                                <div class="product-text">
                                    <h2>Enchiladas - £10.99</h2>
                                    <p>Tortilla chips and melted cheese with the option of salsa, jalapenos, ground meat, guacamole and tomatoes.</p>
                                </div>
                            </div>

                            <div id="product" class="unhidden">
                                <div class="image-container">
                                <img src="assets/quesadilla.jpg" class="thumbnail">
                                </div>    
                                <div class="product-text">
                                    <h2>Quesadilla - £4.99</h2>
                                    <p>Shorter length test</p>
                                </div>
                            </div>

                            <div id="product" class="unhidden">
                                <div class="image-container">
                                <img src="assets/shrimp.jpg" class="thumbnail">
                                </div>    
                                <div class="product-text">
                                    <h2>Shrimp Stir Fry - £10.99</h2>
                                </div>
                            </div>


                        </div>
                    </div> <!-- Product container -->
               </div> <!-- Content container -->
            </div> <!-- Content-wrapper container -->

CSS：

#content {
    height: 100%;
    padding-top: 100px;
}

.wrapper {
    width: 65%; 
    margin: 0 auto;
}

#content-container {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: white;
    box-shadow: -20px 0px 25px -20px #000000, 20px 0px 25px -20px #000000;
    overflow: scroll;
}

#product-container {
    width: 100%;
    height: 100%;
    padding-top: 25px;
}

.product-wrapper {
    width: 80%;
    height: 100%;
    margin: 0px auto;
    text-align: center;
}

#product {
    display: inline-block;
    height: 352px;
    width: 200px;
    margin: 10px;
    border: solid 2px black;
}

.image-container {
    height: 200px;
    width: 200px;
}

.product-text {
    font-family: 'Open Sans Condensed';
    height: 150px;
    width: 100%;
    text-align: center;
    color: black;
    border-top: solid 2px black;
    background: #FFFFFF; /* Old browsers */
    background: -moz-linear-gradient(top, #009641 0%, #a1d54f 96%, #80c217 100%, #7cbc0a 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #009641 0%,#a1d54f 96%,#80c217 100%,#7cbc0a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #009641 0%,#a1d54f 96%,#80c217 100%,#7cbc0a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.product-text h2 {
    font-size: 23px;
    padding: 0;
    margin: 0;
}

.product-text p {
    font-style: italic;
    font-weight: 700;
    padding: 0;
    margin: 0;
}

.thumbnail {
    position: relative;
    height: 200px;
    width: 200px;
    cursor: pointer;
    z-index: 1200;
}

Answer 1

将vertical-align:top添加到#product。

#product {
    display: inline-block;
    height: 352px;
    width: 200px;
    vertical-align: top;
    margin: 10px;
    border: solid 2px black;
}

还有一件事，对于不同的元素来说，拥有相同的id并不是最好的做法。取而代之的是.product class。

Answer 2

您的#product元素为display: inline-block。这意味着它们将采用内联级别特征，其中一个是基线对齐（即vertical-align: baseline）。

使用vertical-align: top覆盖默认设置。

（此外，您有多个id="product"元素。在网页上ID值应该是唯一的。请考虑切换到class="product"。）

<p>元素长度改变父母的位置？

2 个答案: