css - 对齐同一列中文本的所有行

Question

我正在使用 Twitter Bootstrap

我遇到的问题是我试图将下一个对齐到同一“列”。看看我的意思:

但我想要下一个类似的东西:

只是我不想让文字侵入图像的下方区域。

我有下一个代码。我应该应用什么 CSS？

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <img src="image/bullet">
            <a class="collapsed" data-toggle="collapse" data-parent="#faq-panel" href="#faq">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat dui non tortor volutpat volutpat. Aliquam dignissim ante ornare, finibus quam id,</a></h4>
    </div>
            <div id="faq" class="panel-collapse collapse">
                <div class="panel-body">Suspendisse potenti. Donec porttitor id magna non ultrices.
</div></div></div>

谢谢。

Answer 1

您可以:

• 将 float: left 添加到图像以将其放置在左侧。
• 将display: block 添加到文本包装器，使其成为一个 block 。添加 overflow: hidden 以防止它环绕图像。
• 将 overflow: hidden 添加到 .panel-title 包装器以清除 float ，以防图像高于文本包装器。

.panel-title > img {
  float: left;
}
.panel-title, .panel-title > img + a {
  overflow: hidden;
  display: block;
}

.panel-title > img {
  float: left;
}
.panel-title, .panel-title > img + a {
  overflow: hidden;
  display: block;
}

<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
      <img src="image/bullet.png" src="[img]">
      <a class="collapsed" data-toggle="collapse" data-parent="#qwerty" href="#qwerty">Suspendisse vitae tempor dui, ac ultricies purus. Proin ac lorem sed ligula pellentesque porttitor eu vitae magna. Morbi vel fringilla ex. In fermentum ex eget maximus euismod. Sed quis libero ligula.</a></h4>
  </div>
  <div id="faq-3mini" class="panel-collapse collapse">
    <div class="panel-body">
      ttitor eu vitae magna
    </div>
  </div>
</div>