提供不同的填充行内跨度

Question

我有3个跨度的内联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>

我在span类上的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>