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

尝试使用white-space属性。

/* 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。并让它漂浮在左边看到这里＆gt;的 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>

Bootstrap左对齐图像影响文本布局

2 个答案: