Bootstrap linksbündig Bilder beeinflussen Textlayout

Question

Ich benutze Twitter Bootstrap, um ein einfaches WordPress Theme zu erstellen. Alles funktioniert gut, abgesehen davon, wenn es darum geht, Bilder mit einem Text nach links auszurichten. Mein Beispiel ist unten ...

<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/

Wenn Sie machen die Fenster kleiner es funktioniert gut, bis es wirklich klein wird, dann wird der Text in den Weltraum beginnt seltsam aus.

Ich verstehe, dass es ist, weil die einzelnen Wörter länger sind als der verfügbare Platz, aber ich kann nicht einen Weg vorstellen, dies zu verhindern, hat jemand einen Rat?

Answer 1

können Sie @media queries verwenden, wenn der Bildschirm also zu klein ist, wird das Bild nicht schweben und so der Text darunter geht.

ich auch margin:0 auto hinzugefügt, so dass die img wird zentriert sein, aber das ist nur, wenn Sie wollen.

siehe jsfiddle oder Codeschnipsel unten.

ODER Sie könnten ein max-width:x px auf das Bild einstellen, wenn der Bildschirm kleiner wird. und lassen Sie es schwebte links sehen hier>max-width

lassen Sie mich wissen, ob es

hilft

/* 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;} 
 
\t 
 
}

<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>

Answer 2

Versuchen Sie, die white-space Eigenschaft.

/* 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>