Question

我的标题框中有不同尺寸的图像。

 <div class='divboxheader'>
<img class='imgstyle' src="http://www.bnbsync.com/themes/bnbsync/assets/images/logo-dark.png" />
<span class='textleft textcustom'><b>text of title1</b></span>
<span class='textright'>text</span>

this is a screen

如何对齐不同行的文字？

完整示例： https://jsfiddle.net/tcggk8ya/1

Answer 1

问题在于您依靠不一致的内容（图像宽度）来生成文本的间距。这个问题有多种解决方案，但我建议将img包装在一个固定的容器中。

我创建了一个快速的脏例子，展示了如何使用语义标签集来完成这项工作。

.boxlist {
  list-style: none; 
  margin: 0;
  padding: 0;
}

.boxlist__item {
  background-color: white;
  border: 1px solid black;
  border-bottom: none;
  box-sizing: border-box;
  width: 300px;
  height: 50px;
}

.boxlist__item:last-child {
  border-bottom: 1px solid black;
}

.boxlist__figure {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
  text-align: center;
 }
 
 .boxlist__figure-img {
   width: auto;
   height: 25px;
   margin-right: 0;
}

.boxlist__figure-label {
  display: block;
  font-family: "Arial";
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boxlist__content {
  display: block;
  box-sizing: border-box;
  float: left;
  font-family: "Arial";
  line-height: 50px;
  padding-left: 25px;
  text-align: left;
  width: 200px;
}

.boxlist__actions {
  list-style: none; 
  margin: 0;
  padding: 0;
}

.boxlist__action {
  display: block;
  font-family: "Arial";
  font-size: 12px;
  line-height: 25px;
}

<ul class="boxlist">
  <li class="boxlist__item">
    <figure class="boxlist__figure">
      <img class='boxlist__figure-img' src="http://www.bnbsync.com/themes/bnbsync/assets/images/logo-dark.png" />
      <span class="boxlist__figure-label">My label</span>
    </figure>
    
    <strong class="boxlist__content">Some user</strong>
    
    <ul class="boxlist__actions">
      <li class="boxlist__action">action 1</li>
      <li class="boxlist__action">action 2</li>
    </ul>
  </li>
  
  <li class="boxlist__item">
    <figure class="boxlist__figure">
      <img class='boxlist__figure-img' src="http://www.bnbsync.com/themes/bnbsync/assets/images/logo-dark.png" />
      <span class="boxlist__figure-label">My label</span>
    </figure>
    
    <strong class="boxlist__content">Some user</strong>
    
    <ul class="boxlist__actions">
      <li class="boxlist__action">action 1</li>
      <li class="boxlist__action">action 2</li>
    </ul>
  </li>
  
  <li class="boxlist__item">
    <figure class="boxlist__figure">
      <img class='boxlist__figure-img' src="https://lh5.googleusercontent.com/-iRkoc0wxL4w/AAAAAAAAAAI/AAAAAAAAAAk/PTyC2SH4ZqE/photo.jpg?sz=110" />
      <span class="boxlist__figure-label">My label</span>
    </figure>
    
    <strong class="boxlist__content">Some user</strong>
    
    <ul class="boxlist__actions">
      <li class="boxlist__action">action 1</li>
      <li class="boxlist__action">action 2</li>
    </ul>
  </li>
</ul>

Answer 2

您可以使用表格布局或弹性布局

我用表格布局做了一个例子：

https://jsfiddle.net/L2gc6s16/

执行以下操作：

1：必须显示divbox：table

2：将你的img包装成一个给出span的显示：table-cell

3：为包含图像的表格单元格指定宽度：

.divboxheader span:first-child {
  width:50px;
}

4：将img的宽度设置为100％

5：删除花车

div中不同的图像大小对齐

2 个答案: