Mehrere Textzeilen neben dem Bild (CSS-HTML)

Lesezeit: 5 Minuten

Benutzer-Avatar
OstlerDev

Ich versuche, 2 Textzeilen neben ein Bild zu setzen, ungefähr so

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

Das ist der Code, den ich bisher habe

<p style="color: #fff;"><img src="https://stackoverflow.com/questions/20391156/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 derzeit tut es dies:

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

Ich habe das ganze Internet durchsucht, konnte aber nicht herausfinden, wie das geht, jede Hilfe wäre sehr willkommen.

Benutzer-Avatar
Ming

So etwas gibt es nicht float: center; Sie können beides wählen left, rightoder none.

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

Wenn du float: left; Auf dem Bild wird es das tun, wonach Sie suchen.

Wenn Sie es zentriert haben möchten, müssen Sie das Bild und den Text in einen Container packen, die Breite des Containers festlegen und fertig margin: 0 auto; darauf, dann lassen Sie Ihr Bild weiterhin schweben – außer es wird durch den Wrapper eingeschränkt.

  • Ich versuche, das Bild und den Text in einem Banner zu zentrieren. Wenn ich es nach links schweben lasse, geht es ganz nach links, ohne dass ich es zentrieren kann.

    – OstlerDev

    5. Dezember 2013 um 4:27 Uhr

  • Wenn Sie es zentriert haben möchten, müssen Sie das Bild und den Text in einen Container packen, die Breite des Containers festlegen und fertig margin: 0 auto; darauf, dann lassen Sie Ihr Bild weiterhin schweben – außer es wird durch den Wrapper eingeschränkt. Sieh dir das an: jsfiddle.net/vd7X8/1 (auch aktualisierte Antwort.)

    – Min

    5. Dezember 2013 um 4:32 Uhr

Hier ist meine Demo, die verwendet wird float und overflow mit einigen erklären

.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

Geben Sie hier die Bildbeschreibung ein

Hier ist ein Ausschnitt mit einem SVG, 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>

Benutzer-Avatar
Benutzer3491125

Ich weiß, dass dieser Beitrag alt ist, aber wickeln Sie Ihr Element in a ein div und wende die an vertical-align:top dazu div und du bist fertig.

Benutzer-Avatar
Asraful Haque

Prüfen Sie. Es ist gut definiertes 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="https://stackoverflow.com/questions/20391156/span.png"><span class="ban1">Line one of text</span>
               <span class="ban2">Line 2 of text</span>
            </p>
         </div>
      </div>
   </body>
</html>

  • Hier steht float: center; das ist in css nicht möglich

    – Miguel Stevens

    18. Februar 2015 um 17:09 Uhr

Benutzer-Avatar
Ricky Levi

Ich weiß, das ist ein alter Beitrag, aber ich wollte das nicht nur sagen float werde es tun, die <img> tag hat ein eingebautes Attribut namens align="left" der tut das auch

<p>
 <img src="https://stackoverflow.com/questions/20391156/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/

  • Hier steht float: center; das ist in css nicht möglich

    – Miguel Stevens

    18. Februar 2015 um 17:09 Uhr

Benutzer-Avatar
Zeilen von Code

Ich schlage vor, die alten Tabellen zu verwenden, die großartig funktionieren. In Bezug auf CSS muss nur die hinzugefügt werden vertical-align: top Eigentum.

<table>
  <tbody>
    <tr>
      <td class="img-container">
        <img src="https://img2.gratispng.com/20180324/sbe/kisspng-google-logo-g-suite-google-5ab6f1f0dbc9b7.1299911115219389289003.jpg"/>
      </td>
      <td class="content-container">
        <span class="description">This is a very long text that creates multiple lines with the image at left side</span>
      </td>
    </tr>
  </tbody>
</table>

Geige: https://jsfiddle.net/fypa0k4w/

1379540cookie-checkMehrere Textzeilen neben dem Bild (CSS-HTML)

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy