Wie wird ein Bild, ein Absatz und dann ein anderes Bild in dieselbe Zeile eingefügt?

-1

Ich möchte ein Bild, einen Absatz und dann ein anderes Bild in einer Zeile in HTML/CSS setzen.Wie wird ein Bild, ein Absatz und dann ein anderes Bild in dieselbe Zeile eingefügt?

Ich habe es so zu arbeiten.

<html> 
<body> 
     <span style="float:left; display: inline-block; width: 20%;"> 
     <img src="https://pbs.twimg.com/profile_images/762369348300251136/5Obhonwa.jpg" 
     width="90" height="110" /> 
     </span> 
     <span style="float:left;width: 60%;"> 
      <p style="float:left; display:block;">Lorem ipsum dolor sit amet,  
       consectetur adipiscing elit. Integer arcu mauris, ullamcorper et 
       ligula vitae, hendrerit sodales tellus. Maecenas quis pulvinar 
       lacus.</p> 
     </span> 
     <span style="float:right; width 20%;"> 
      <img src="https://www.google.ca/doodle4google/images/splashes/featured.png" width="90" height="110"> 
     </span> 
</body> 
</html>

weiß ich, ich es in einer externen CSS-Blatt tun könnte oder Style-Tags, aber es ist für eine Zuordnung, so dass ich alle drei zu tun haben.

Quelle

2016-10-24 sam yatsula

Hier ist ein Beispiel: https://jsfiddle.net/sp6ykv66/

HTML:

<img src="https://dummyimage.com/100x100/000/fff" alt=""> 
<p class="inline">Lorem Ipsum</p> 
<img src="https://dummyimage.com/100x100/000/fff" alt="">

CSS:

.inline{display: inline-block;}

Quelle

2016-10-24 13:50:16 Okba

.parent{ 
display:flex; 
justify-content:center; 
align-items:center; 
flex-direction:row; 
} 

.children{ 
// whatever you want 
// your paragraph and imgs need to be children of parent 
}

so brauchen Sie Absatz und imgs in einem div class sein = "parent "

so display: flex wirkt divs Kinder aka Absatz- und imgs

Hinweis: Im am Telefon

Quelle

2016-10-24 13:51:10 eiipaw

Sie entweder (auf den h4 Elemente, wie sie Block standardmäßig sind) verwenden können

display: inline-block;

Oder Sie können die Elemente auf der linken Seite schweben/rght

float: left;

Nur nicht vergessen, die Schwimmer nach

löschen

clear: left;

oder versuchen Sie es

h4{width:80px;float:left}

<h4 class='liketext'><img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/>$likes</h4> 
 
<h4 class='liketext'> <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/></h4>

Quelle

2016-10-24 13:56:56

Wie wird ein Bild, ein Absatz und dann ein anderes Bild in dieselbe Zeile eingefügt?

Antwort

Verwandte Themen