如何在保持响应能力的同时避免浮动图像旁边的段落文本中断？
用户名
我正在使用最新的Bootstrap和LESS。
我建立了一个文章网格，其中包含一个浮动到左侧的图像，旁边是一个段落：
HTML：
<!-- featured articles -->
<div id="featured-articles" class="container">
<!-- row -->
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/265x150">
<h4>Article Header</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex... <a href="#">Read More</a></p>
</div>
<div class="col-md-6">
<img src="http://placehold.it/265x150">
<h4>Article Header</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex... <a href="#">Read More</a></p>
</div>
</div><!-- row -->
</div><!-- /featured articles -->
较少的：
#featured-articles {
padding-bottom: 25px;
img {
display: block;
margin: 0 auto;
padding-bottom: 15px;
clear: both;
}
p {
text-align: justify;
}
h4 {
margin-top: 0px;
}
@media (min-width: @screen-sm-min) {
img {
float: left;
padding-right: 10px;
padding-bottom: 0px;
}
.col-md-6 {
padding-bottom: 25px;
margin-bottom: 25px;
}
}
}
现在的问题是，在某些较小的分辨率下，右侧的文本开始中断，而不是保持段落的对齐：
有没有一种方法可以使文本很好地对齐，而不是在保持响应速度的同时进行折断？
贝壳
通常，您将自动换行并设置一个左边距。在这种情况下约为270px。
p {
text-align: justify;
margin-left: 270px;
}
这是一个示例：http : //jsfiddle.net/f7ohrLrs/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在Bootstrap中将模板化显示控件居中，同时保持图像响应能力？
- 2
在Google Maps上浮动div，同时保持bootstrap响应能力
- 3
如何在行的列内移动图像或文本，以免其失去响应能力？
- 4
在Flexbox上叠加，同时保持响应能力
- 5
使用部分时保持图像响应能力
- 6
无论屏幕大小如何，都可以保持背景图像的响应能力
- 7
如何在所有设备上“左居中”对齐内容以保持对 css 的响应能力？
- 8
如何获得响应能力？
- 9
带有边距和响应能力的在Bootstrap中浮动图像的最佳方法？
- 10
在保持UI响应能力的同时缓冲数据库游标中的数据
- 11
如何提高“ ManagementEventWatcher”逻辑的响应能力？
- 12
如何使网站具有响应能力？
- 13
如何提高“ ManagementEventWatcher”逻辑的响应能力？
- 14
如何在iframe旁边浮动文本
- 15
CSS的响应能力
- 16
网站响应能力
- 17
如何使背景图像具有响应能力而又不丢失比例
- 18
如何使图像具有相同的宽度和高度，但仍然具有 Bootstrap 响应能力？
- 19
文本旁边的 HTML 浮动图像
- 20
如何在不改变网站响应能力的情况下增加轮播的宽度
- 21
通过纯 CSS 修复图像响应能力
- 22
如何使文本浮动在HTML / CSS中的图像旁边？
- 23
如何在图像顶部保持文本框响应？
- 24
如何在浮动侧边栏旁边动态调整图像大小？
- 25
如何测试HTML文件的移动响应能力
- 26
如何固定此菜单，使其具有响应能力？
- 27
如何使JQuery News Ticker具有响应能力？
- 28
引导程序-响应能力
- 29
控制网页的响应能力
我来说两句