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

时间:2014-11-28 16:46:16

标签: css twitter-bootstrap

我正在使用twitter bootstrap

我遇到的问题是我试图将下一个对齐#34;列#34;。看看我的意思: enter image description here

但是我希望有类似下一个的东西:

enter image description here

我不希望文字侵入图片的下方区域。

我有下一个代码。我应该申请什么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>

感谢。

2 个答案:

答案 0 :(得分:2)

你可以:

  • float: left添加到图片中,将其放在左侧。
  • display: block添加到文本包装器中以使其成为块。添加overflow: hidden以防止它缠绕图像。
  • overflow: hidden添加到.panel-title包装器以清除浮动,以防图像高于文本包装器。
.panel-title > img {
  float: left;
}
.panel-title, .panel-title > img + a {
  overflow: hidden;
  display: block;
}

&#13;
&#13;
.panel-title > img {
  float: left;
}
.panel-title, .panel-title > img + a {
  overflow: hidden;
  display: block;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我会创建一个表。

这样的事情:

 <table>
     <td><img src="image/bullet.png"></td>
     <td>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.</td>
 </table>

但是包含了所有的div和类