提供不同的填充内联跨度

Question

我有三个跨度内联 2 个图像和一个文本。文本位于两个图像之间。所以我试图以不同的方式放置适当的高度。所以我以不同的方式上课。但是填充不起作用。我也想把 image2 放在右边。

显示就像

<dl class="accordion">
    <dt>
       <span class="image"><img src="img/question-blue.png"></span>
        <span class="text">Text Text</span>
        <span class="image2"><img src="img/open-blue-big.png"></span>
    </dt>       
</dl>

我的跨度类 CSS 不起作用？

dd {
    margin: 0;
}

dl.accordion {
    font-family: helvetica Neue; 
    width:100%;
    margin:20px auto 30px; 
    font-size:16px;
}

dl.accordion dt {
    border-bottom:1px solid #EEE; 
    height:auto; 
    text-indent:10px; 
    line-height:40px; 
    color:#333; 
    font-weight:bold; 
    cursor:pointer;}
dl.accordion dt.open {
    background:url(../img/close.png) 97% center no-repeat,-moz-linear-gradient(top, #C6F0FE, #27BCF9);
    background:url(../img/close.png) 97% center no-repeat,-webkit-gradient(linear, left top, left bottom, from(#C6F0FE), to(#27BCF9));}
dl.accordion dd { 
    background:#FFF; 
    padding:10px; 
    line-height:1.5; 
    display:none;
}

.text {
    display: inline-block;
    padding-top: 20px;
    padding-bottom: 20px;
}

.image2 {
    display: inline-block;
    text-align: right;
}

Answer 1

我相信你正在寻找display: flex。

带有display: flex 的元素将并排对齐其display: block 子元素。您可以使用align-items: center 将它们垂直居中，并使用justify-content: space-between 将它们均匀分布并留出空间。

如果您也希望文本左对齐，可以将其设置为flex-grow: 1。

dt {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

dt > span {
    display: block;
}

dt > span.text { flex-grow: 1; padding-left: 10px; }

<dl class="accordion">
    <dt>
        <span class="image"><img src="https://via.placeholder.com/100x50"></span>
        <span class="text">Text Text</span>
        <span class="image2"><img src="https://via.placeholder.com/100x50"></span>
    </dt>       
</dl>

这是上述内容的直观表示：

dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid red;
  padding: 5px;
}

dt>span {
  display: block;
  border: 1px solid blue;
}

dt>span.text {
  flex-grow: 1;
  padding-left: 10px;
}

<dl class="accordion">
  <dt>
    <span class="image"><img src="https://via.placeholder.com/100x50"></span>
    <span class="text">This div's width will grow to fill the space because of "flex-grow: 1"</span>
    <span class="image2"><img src="https://via.placeholder.com/100x50"></span>
  </dt>
</dl>