it-swarm.com.de

Mehrere Textzeilen neben dem Bild (CSS-HTML)

Ich versuche, zwei Zeilen Text neben ein Bild zu setzen, so ähnlich

_________
|       | Line one of text
| image |
|       | Line two of text
---------

Dies ist der Code, den ich bisher habe

<p style="color: #fff;"><img src="assets/image.png"><span style="">Line one of text</span>
    <br>
    <span class="ban2">Line 2 of text</span></p>
 .banner p {
  font-family: "Gentium Basic";
  font-size: 19px;
  text-align: center;
  color: #aaa;
  margin-top: -10;
  display: block;
 }
.banner img {
  float: center; 
    margin: 5px;
 }
 .banner span {
  padding-top: 50px;
  font-size: 17px;
  vertical-align:top;
 }
  .banner .ban2 span {
  padding-top: 50px;
  font-size: 17px;
  vertical-align:top;
 }

Aber momentan tut es das:

_________
|       | Line one of text
| image |
|       | 
---------
Line two of text

Ich habe im ganzen Internet nachgesehen, konnte jedoch nicht herausfinden, wie dies gemacht werden kann. Jede Hilfe wäre sehr willkommen.

21
OstlerDev

Es gibt keine float: center; Sie können zwischen left, right oder none wählen.

http://jsfiddle.net/vd7X8/1/

Wenn Sie auf dem Bild float: left; sind, wird das tun, was Sie suchen.

Wenn Sie möchten, dass es zentriert wird, müssen Sie das Bild und den Text in einen Container einfassen, die Breite des Containers festlegen und margin: 0 auto; darauf anwenden. Anschließend wird das Bild weiterhin verschoben (außer es wird eingeschränkt) von der Verpackung.

16
Ming

Hier ist ein Snippet, das ein SVG verwendet, damit Sie es überall testen können.

.img{
    float: left;
    margin-right:1rem;
}
<div>
  <svg class="img" width="50" height="50" >
    <rect width="50" height="50" style="fill:black;"/>
  </svg>
  <p>
    Line 1
    <br>
    Line 2
  </p>
</div>

3
mvndaai

Ich weiß, dass dieser Beitrag alt ist, aber wickle dein Element in eine div ein und wende den vertical-align:top auf diese div an, und du bist fertig. 

2
user3491125

Prüfen Sie. Es ist gut definiert css.

<!DOCTYPE html>
<html>
   <head>
      <title>Selectors</title>
      <style>
         .banner p {
             font-family: "Gentium Basic";
             font-size: 19px;
             text-align: center;
             color: #aaa;
             margin-top: -10;
             display: block;
         }
         img, span {
             float:left;
         }
         .banner img {
             float: center; 
             margin: 5px;
         }
         [class="ban1"]{
             font-size: 17px;
             position:relative;
             top:50px;
             left:11px;
         }
         [class="ban2"] {
             font-size: 17px;
             position: relative;
             left: -97px;
             top: 74px;
         }
      </style>
   </head>
   <body>
      <div class="banner">
         <div class="wrapper">
            <p><img src="span.png"><span class="ban1">Line one of text</span>
               <span class="ban2">Line 2 of text</span>
            </p>
         </div>
      </div>
   </body>
</html>
1
Asraful Haque

Hier ist meine Demo die mit float und overflow einiges erklärt hat

.div1 {
     border: 3px solid #0f0;
     overflow:auto; // without overflow here, if the "Line 1" and "Line 2" is short then "Next elements" will display below "Line 2" and the image will cover the "Next elements" 
}
.img {
    float: left;
    width:100px;
    height:100px;
    background: #000 
}
.div2 {
    float: left; // without float here, if "Line 1" and "Line 2" is long -> text will display both at right and bottom the image
} 
<div class="div1">
  <img class="img"/>
  <div class="div2">
    <p> Line 1 </p>
    <p> Line 2 </p>
  </div>
</div>

<p>Next elements</p>

Hoffe es hilft

enter image description here

1
Phan Van Linh

Ich weiß, dass dies ein alter Beitrag ist, aber ich wollte trotzdem sagen, dass nicht nur float das tun wird, der <img>-Tag hat ein eingebautes Attribut namens align="left", das auch das tut

<p>
 <img src="smiley.gif" align="left"><span>Line one of text</span>
 <br>
 <span class="ban2">Line 2 of text</span>
</p>

Geige: http://jsfiddle.net/356akcoy/

0
Ricky Levi