引导影响文本布局的左对齐图像

Question

我正在使用Twitter Bootstrap构建一个基本的WordPress主题。一切都很好，除了当涉及到包括图像与一些文本左对齐。我的例子如下…

<div class="entry-content">
    <div>
        <img class="size-medium wp-image-4587 alignleft" src="https://dummyimage.com/300x200/000000/fff" width="300" height="200">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna massa, varius eleifend commodo a, efficitur a magna. Cras egestas porta vehicula. Suspendisse egestas sem in nunc tincidunt venenatis. Proin volutpat vulputate vehicula. Suspendisse odio turpis, imperdiet id dictum sed, laoreet vel eros. Quisque a ultricies erat. Quisque est ante, venenatis sed ligula ac, pulvinar consequat felis. Nulla egestas ut odio at sodales. Etiam in urna arcu.
    </div>
    <div>
        Vivamus blandit rutrum augue, nec sodales ipsum sagittis non. Nam nec mi quis lectus lacinia bibendum. In hac habitasse platea dictumst. Fusce finibus eget nunc at varius. Nam nec dignissim neque, sit amet pretium sem. Quisque eu magna at neque aliquam luctus. Maecenas molestie porta faucibus. Aliquam ac erat consequat, ullamcorper risus eget, lacinia dolor. Nullam tincidunt sit amet mauris et tempus. Duis iaculis dictum nunc nec sollicitudin.
    </div>
</div>

https://jsfiddle.net/DTcHh/25884/

如果你把窗口变小，它可以正常工作，直到它变得非常小，然后文本开始奇怪地间隔。

我知道这是因为单个单词比可用的空间长，但我想不出一个方法来防止这种情况，有人有什么建议吗?

Answer 1

尝试使用空白属性。

/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
    margin: 10px;
}
.alignleft{
  float:left;margin-right:10px;
clear: left;
}
p{
white-space: -moz-pre-wrap !important;
white-space: -webkit-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
white-space: normal;
}

<div class="entry-content">
    <div>
            <img class="size-medium wp-image-4587 alignleft" src="https://dummyimage.com/300x200/000000/fff" width="300" height="200">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna massa, varius eleifend commodo a, efficitur a magna. Cras egestas porta vehicula. Suspendisse egestas sem in nunc tincidunt venenatis. Proin volutpat vulputate vehicula. Suspendisse odio turpis, imperdiet id dictum sed, laoreet vel eros. Quisque a ultricies erat. Quisque est ante, venenatis sed ligula ac, pulvinar consequat felis. Nulla egestas ut odio at sodales. Etiam in urna arcu.</p>
    </div>
    <div>
        Vivamus blandit rutrum augue, nec sodales ipsum sagittis non. Nam nec mi quis lectus lacinia bibendum. In hac habitasse platea dictumst. Fusce finibus eget nunc at varius. Nam nec dignissim neque, sit amet pretium sem. Quisque eu magna at neque aliquam luctus. Maecenas molestie porta faucibus. Aliquam ac erat consequat, ullamcorper risus eget, lacinia dolor. Nullam tincidunt sit amet mauris et tempus. Duis iaculis dictum nunc nec sollicitudin.
    </div>
</div>

Answer 2

你可以使用@media queries，这样当屏幕太小时，图像就不会浮动，所以文本就会在它的下面。

我还添加了margin:0 auto，所以img将居中，但这只是如果你想。

参见jsfiddle或下面的代码片段。

或您可以在屏幕变小时为图像设置max-width:x px。并让它左浮动>max-width

如果有帮助请告诉我

/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
    margin: 10px;
}
.alignleft{float:left;margin-right:10px;}
@media only screen and (max-width: 460px) {
  .alignleft{float:none;display:block;margin:0 auto;}
	
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="entry-content">
    <div>
            <img class="size-medium wp-image-4587 alignleft" src="https://dummyimage.com/300x200/000000/fff" width="300" height="200">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna massa, varius eleifend commodo a, efficitur a magna. Cras egestas porta vehicula. Suspendisse egestas sem in nunc tincidunt venenatis. Proin volutpat vulputate vehicula. Suspendisse odio turpis, imperdiet id dictum sed, laoreet vel eros. Quisque a ultricies erat. Quisque est ante, venenatis sed ligula ac, pulvinar consequat felis. Nulla egestas ut odio at sodales. Etiam in urna arcu.
    </div>
    <div>
        Vivamus blandit rutrum augue, nec sodales ipsum sagittis non. Nam nec mi quis lectus lacinia bibendum. In hac habitasse platea dictumst. Fusce finibus eget nunc at varius. Nam nec dignissim neque, sit amet pretium sem. Quisque eu magna at neque aliquam luctus. Maecenas molestie porta faucibus. Aliquam ac erat consequat, ullamcorper risus eget, lacinia dolor. Nullam tincidunt sit amet mauris et tempus. Duis iaculis dictum nunc nec sollicitudin.
    </div>
</div>