我正在使用twitter bootstrap
我遇到的问题是我试图将下一个对齐#34;列#34;。看看我的意思:
但是我希望有类似下一个的东西:
我不希望文字侵入图片的下方区域。
我有下一个代码。我应该申请什么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>
感谢。
答案 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;
}
.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;
答案 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和类