【问题标题】:Why is the <p> element text overlapping on itself为什么 <p> 元素文本在自身上重叠
【发布时间】:2018-12-30 03:59:58
【问题描述】:

正如您在 sn-p 中看到的那样,&lt;p&gt; 元素由于某种原因重叠在自身之上,并且没有在应该的时候进入新行。我不确定是什么原因造成的。我认为它会起作用的方式是 &lt;p&gt; 元素的父元素的高度会根据 p 元素的高度增加。

*, *:after, *:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    list-style-type: none;
}
body {
    background-color: #F7F4EB;
    line-height: 1.8rem;
    font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
}
.wrapper {
    width: 70%;
    margin: 0 auto;
    height: 100%;
}
.gallery-container {
    font-size: 0px;
    margin-bottom: 15px;
}
.gallery-element {
    text-align: center;
    padding: 0px 20px 0px 20px;
    display: inline-block;
    width: 33.33333%;
}
.responsive {
    width: 100%;
    height: auto;
}
.information {
    font-size: 14px;
}
.company-info {
    display: flex;
}
.who-us, .about-us {
    flex: 1;
}
<section>
            <div class="gallery-container">
                <div class="gallery-element">
                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
                    <p class='information'>
                        We can install a variety of different washing machines including front loading machines, top loading machines and also washer dryer machines.
                        Our installation service include all safety checks to ensure there is no leak potential.
                        We provide a dishwasher installation service that ensures the machine is working efficiently.
                        We check that the electrical and plumbing connections in the house are safe and make certain there will be no potential for leaks.
                    </p>
                </div>
                <div class="gallery-element">
                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
                    <p class='information'>
                        We can install a variety of different washing machines including front loading machines, top loading machines and also washer dryl and plumbing connections in the house are safe and make certain there will be no potential for leaks.
                    </p>
                </div>
                                <div class="gallery-element">
                <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
                <p class='information'>
                    We can install a variety of different washing machines including front loading machines, top loading machines and also washer dryer machines.
                    Our installation service include all safety checks to ensure there is no leak potential.
                    We provide a dishwasher installation service that ensures the machine is working efficiently.
                    We check that the electrical and plumbing connections in the house are safe and make certain there will be no potential for leaks.
                </p>
            </div>
                            <div class="gallery-element">
                <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
                <p class='information'>
                    We can install a variety of different washing machines including front loading machines, top loading machines and also washer dryer machines.
                    Our installation service include all safety checks to ensure there is no leak potential.
                    We provide a dishwasher installation service that ensures the machine is working efficiently.
                    We check that the electrical and plumbing connections in the house are safe and make certain there will be no potential for leaks.
                </p>
            </div>
            </div>
</section>

【问题讨论】:

  • 因为你在.gallery-container上有line-height: 0;

标签: php html css twitter-bootstrap


【解决方案1】:

似乎从包装 div.gallery-container 上的 0 行高开始。删除该行或更改为正常值,如 1 或 1.4。

*, *:after, *:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    list-style-type: none;
}
body {
    background-color: #F7F4EB;
    line-height: 1.8rem;
    font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
}
.wrapper {
    width: 70%;
    margin: 0 auto;
    height: 100%;
}
.gallery-container {
    font-size: 0px;
    /* REMOVED */
    /* line-height: 0; */
    margin-bottom: 15px;
}
.gallery-element {
    text-align: center;
    padding: 0px 20px 0px 20px;
    display: inline-block;
    width: 33.33333%;
}
.responsive {
    width: 100%;
    height: auto;
}
.information {
    font-size: 14px;
}
.company-info {
    display: flex;
}
.who-us, .about-us {
    flex: 1;
}
<section>
            <div class="gallery-container">
                <div class="gallery-element">
                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
                    <p class='information'>
                        We can install a variety of different washing machines including front loading machines, top loading machines and also washer dryer machines.
                        Our installation service include all safety checks to ensure there is no leak potential.
                        We provide a dishwasher installation service that ensures the machine is working efficiently.
                        We check that the electrical and plumbing connections in the house are safe and make certain there will be no potential for leaks.
                    </p>
                </div>
            </div>
</section>

【讨论】:

    【解决方案2】:

    .gallery-container 中删除font-size: 0px; line-height: 0;

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-03-27
      • 1970-01-01
      • 1970-01-01
      • 2018-08-09
      • 1970-01-01
      相关资源
      最近更新 更多