Question

我正在尝试对齐一行 - icon | text | - 图标|文字| - 图标|文字| 只是将div放在彼此旁边并且它们似乎也正确对齐似乎没关系。但是当我在子div之间添加一个

标签时，它表现得非常奇怪，并将其边距设置为父div的1/2。

这就是我的HTML：

<section id="subber">
            <span class="subber-element-icon">
            </span>
            <div class="subber-element">
                <p>hafjadljla;j kfaj lfjadklj;af kl;aj a</p>
            </div>
</section>

这就像CSS看起来一样：

#subber {
height: 10%;
width: 100%;
}

.subber-element{
height: 100%;
display: inline-block;
border: 1px black solid;
width: 30%;
}

.subber-element p{
font-family: vegur regular;
color: grey;
display: inline;
margin: 0;
padding: 0;
}

.subber-element-icon{
height: 100%;
width: 10%;
border: 1px black solid;
display: inline-block;   
}

希望你们其中一个人可以帮帮忙！

Answer 1

我也会在DEMO

发布解决方案

HTML

<div id="subber">
        <img class="icon">
        </img>
        <section class="text">
              <p>PROVA PROVA PROVA CON DEL TESTO</p>
        </section>
  </div>
  <div id="subber">
        <div class="icon">
        </div>
        <section class="text">
            <p><span>PROVA PROVA PROVA CON DEL TESTO TESTO TESTO</span></p>
        </section>
  </div>
  <div id="subber">
        <div class="icon">
        </div>
        <section class="text">
            <p>PROVA PROVA PROVA CON DEL TESTO TESTO TESTO</p>
        </section>
  </div>

CSS

.icon{
height:50px;
width:50px;
border:1px solid black;
float:left;
}
.text{
border:1px solid black;
float:left;
height:50px;
max-width:300px;
color:red;
}
.text p{
height:50px;
padding:0px;
}

#subber{
float:left;
width:400px;
height:50px;
}

向div元素添加<p>标记时，边距变为父div的1/2 </p>

1 个答案: