Wie diese Ziffer auf der rechten Seite des Bildes bewegen

here is the picture of it Wie diese Ziffer auf der rechten Seite des Bildes bewegen

ich versucht war ein Udacity die Zuordnung zu tun, ich will den Absatz auf der rechten Seite des Bildes bewegen, bitte helfen Sie. ich tatsächlich versucht, div-Tags für jeden setzen und jeder Block dh Überschrift und Bild und ein Absatz

<!DOCTYPE html> 
<html> 
<head> 
    <title>Hello</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
<div> 
    <div class="heading"> 
     <h1>MY FAVOURITE APP</h1> 
    </div> 
    <div class="data"> 
     <div class="data"> 
      <img src="C:\Users\sreem\Desktop\pix.jpeg" alt=""> 
      <div> 
      <p class="para">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
      </p> 
     </div> 
     </div> 

    </div> 
    </div> 
</div> 
</body> 
</html> 

**style.css**

CSS-Code für HTML-Datei

img { 
    height: 250px; 
    width: 250px; 
    margin-top: 20px; 
    margin-left: 100px; 
} 

.heading { 
    height: 70px; 
    width: 80%; 
    margin-top: 50px; 
    color:white; 
    background-color:#5AB9BA; 
    padding-top: 70px; 
    letter-spacing: 5px; 
    margin-left: 100px; 
} 
.para{ 
height: 250px; 
width: 250px; 
margin-left: 400px; 

}

Quelle

2017-08-05 Srjk

Mögliches Duplikat [? Warum Ziffer nicht übereinander ausrichten neben dem Bild in HTML] (https://stackoverflow.com/questions/32464735/warum-paragraph-dont-align-neben-bild-in-html) und eine vielzahl von gleichen antworten gefunden durch die suche nach SO. – Rob

Float das Bild auf der linken Seite.

img { 
 
    height: 250px; 
 
    width: 250px; 
 
    margin-top: 20px; 
 
    margin-left: 100px; 
 
    float: left; /** float the image to the left **/ 
 
} 
 

 
.heading { 
 
    height: 70px; 
 
    width: 80%; 
 
    margin-top: 50px; 
 
    color: white; 
 
    background-color: #5AB9BA; 
 
    padding-top: 70px; 
 
    letter-spacing: 5px; 
 
    margin-left: 100px; 
 
} 
 

 
.para { 
 
    height: 250px; 
 
    width: 250px; 
 
    margin-left: 400px; 
 
}

<div> 
 
    <div class="heading"> 
 
    <h1>MY FAVOURITE APP</h1> 
 
    </div> 
 
    <div class="data"> 
 
     <img src="http://lorempixel.com/250/250/" alt=""> 
 
     <p class="para">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
     It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with 
 
     desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
     </p> 
 
    </div> 
 
</div>

Quelle

2017-08-05 13:38:31

können Sie Eigenschaft float verwenden. Ich gab float: left; zu img Tag.

img { 
 
    height: 250px; 
 
    width: 250px; 
 
    margin-top: 20px; 
 
    margin-left: 100px; 
 
    float: left; 
 
} 
 

 
.heading { 
 
    height: 70px; 
 
    width: 80%; 
 
    margin-top: 50px; 
 
    color:white; 
 
    background-color:#5AB9BA; 
 
    padding-top: 70px; 
 
    letter-spacing: 5px; 
 
    margin-left: 100px; 
 
} 
 
.para{ 
 
height: 250px; 
 
width: 250px; 
 
margin-left: 400px; 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Hello</title> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 
<body> 
 
<div> 
 
    <div class="heading"> 
 
     <h1>MY FAVOURITE APP</h1> 
 
    </div> 
 
    <div class="data"> 
 
     <div class="data"> 
 
      <img src="https://www.w3schools.com/css/img_fjords.jpg" alt=""> 
 
      <div> 
 
      <p class="para">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
      </p> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

Quelle

2017-08-05 13:41:32 soheil

Force-Bild Schwimmer nach links:

display:inline-block; 
    float:left; 


img { 
    height: 250px; 
    width: 250px; 
    margin-top: 20px; 
    margin-left: 100px; 
    display:inline-block; 
    float:left; 
}

Quelle

2017-08-05 13:44:34

Wie diese Ziffer auf der rechten Seite des Bildes bewegen

Antwort

Verwandte Themen