Hoe plaats je een tekst naast de afbeelding?

Ik maak een website op Google Sites. Ik kies de 3 koloms layout en zet de afbeeldingen één voor één. Ik wil de tekst naast de afbeelding plaatsen, maar het werkt alleen met de eerste regel, en zelfs dat is in “het einde” van de afbeelding. De onderstaande schermafbeelding illustreert wat ik zeg.

De 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>

Wat kan ik doen om alle tekstregels naast de afbeelding te plaatsen? Zoals, op dezelfde hoogte van de afbeelding, of iets dergelijks.


Antwoord 1, autoriteit 100%

U moet door dit scenario gaan:

Hoe zit het met het gebruik van display:inline-block?

1) Neem een <div/>geef het style=display:inline-blockmaak het vertical-align:topen plaats de afbeelding in die div.

2) Neem een andere div en geef deze ook dezelfde stijl display:inline-block;en plaats alle labels/div’s in deze div.

Hier is het prototype van uw eis

JS Fiddle-demo


Antwoord 2, autoriteit 40%

Gebruik floats om de afbeelding te laten zweven, de tekst moet ernaast lopen

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


Antwoord 3, Autoriteit 40%

maken het beeld float: left;en de tekst float: right;

Neem een ​​kijkje op deze viool heb ik een foto online, maar je kunt gewoon swap it out voor uw foto.


Antwoord 4, Autoriteit 27%

Als u of een andere vos die behoefte hebben aan koppeling met pictogram en tekst als tekst van de link naast de afbeelding hebben zie hieronder 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>

Als u het beeld ziet u het witte gedeelte is het icoon en ander stijl
op deze manier kunt u verschillende knoppen te maken met elk type van pictogrammen die u wilt ontwerp


Antwoord 5

Ik had een soortgelijk probleem, waar ik had een div die de afbeelding en een div die de tekst. De reden dat de mijne niet werkte, was dat de div die de afbeelding had display: inline-block, terwijl de div die de tekst had display: inline.

Ik heb het veranderd in display: inlineen het werkte.

Hier is een oplossing voor een standaard koptekstgedeelte met een logo, titel en 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;
}

Other episodes