wake-up-neo.com

Wie lege ich einen Text neben das Bild (html)?

Ich mache eine Website auf Google Sites. Ich wähle das 3-Spalten-Layout und stelle die Bilder einzeln ein. Ich möchte den Text neben das Bild setzen, aber es funktioniert nur mit der ersten Zeile, und selbst das ist am Ende des Bildes. Der Screenshot unten zeigt, was ich sage. 

screenshot

Der HTML-Code:

<div style="display:block;text-align:left">
<h2><span style="color:rgb(7,55,99)">Students</span></h2>
<hr>
<br>
<div style="display:block;text-align:left"><a href="https://some.addres" imageanchor="1"><img align="left" src="https://some.addres/blue-user-icon.png" border="0"></a>- Name<br>
- Major<br>
- Email<br>
- Lattest</div>
</div>
<br>
<br>

Was kann ich also tun, um die gesamte Textzeile neben das Bild zu setzen? Zum Beispiel auf der gleichen Höhe des Bildes oder so ähnlich.

PS.: Ich wusste nicht, wie ich den Code hier kopieren soll, also mache ich einen Screenshot. Das tut mir leid.

htmlhtml5imagewebgoogle-sites
5
U23r

Sie müssen durch dieses Szenario gehen:

Wie wäre es mit display:inline-block?

1) Nimm einen <div/>, gib ihm style=display:inline-block, vertical-align:top und gib das Bild in das div.

2) Nimm ein anderes div und gib ihm den gleichen Stil display:inline-block; und füge alle Labels/divs in dieses div.

Hier ist der Prototyp Ihrer Anforderung

 

JS Fiddle Demo

11
Dhaval Marthak

bild float: left; und Text float: right; erstellen

Werfen Sie einen Blick auf diese Geige Ich habe ein Bild online verwendet, aber Sie können es einfach für Ihr Bild austauschen.

4
Nathan Yeung

Verwenden Sie Schwimmer, um das Bild zu schweben. Der Text sollte daneben umgebrochen werden

http://www.w3schools.com/css/css_float.asp

3
user1994804

Wenn Sie oder ein anderer Fuchs, der einen Link mit Icon Image und Text als Linktext neben dem Image haben muss, siehe folgenden Code:

CSS

.linkWithImageIcon{

    Display:inline-block;
}
.MyLink{
  Background:#FF3300;
  width:200px;
  height:70px;
  vertical-align:top;
  display:inline-block; font-weight:bold;
} 

.MyLinkText{
  /*---The margin depends on how the image size is ---*/
  display:inline-block; margin-top:5px;
}

HTML

<a href="#" class="MyLink"><img src="./yourImageIcon.png" /><span class="MyLinkText">SIGN IN</span></a>

 enter image description here

wenn Sie das Bild sehen, ist der weiße Bereich das Bildsymbol und der andere ist style Auf diese Weise können Sie verschiedene Schaltflächen mit beliebigen Symboltypen erstellen, die Sie entwerfen möchten

1
Mehdi Jalal

Ich hatte ein ähnliches Problem, bei dem ein Div das Bild und ein Div den Text enthielt. Mein Grund funktionierte nicht, weil das Div, das das Bild enthielt, display: inline-block hatte, während das Div, das den Text hielt, display: inline hatte. 

Ich änderte es in beides, display: inline und es funktionierte. 

Hier ist eine Lösung für einen einfachen Header-Bereich mit Logo, Titel und Slogan:

HTML

<div class="site-branding">
  <div class="site-branding-logo">
    <img src="add/Your/URI/Here" alt="what Is The Image About?" />
  </div>
</div>
<div class="site-branding-text">
  <h1 id="site-title">Site Title</h1>
  <h2 id="site-tagline">Site Tagline</h2>
</div>

CSS

div.site-branding { /* Position Logo and Text  */
  display: inline-block;
  vertical-align: middle;
}

div.site-branding-logo { /* Position logo within site-branding */
  display: inline;
  vertical-align: middle;
}

div.site-branding-text { /* Position text within site-branding */
    display: inline;
    width: 350px;
    margin: auto 0;
    vertical-align: middle;
}

div.site-branding-title { /* Position title within text */
    display: inline;
}

div.site-branding-tagline { /* Position tagline within text */
    display: block;
}
0
Russel Fish