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-block
maak het vertical-align:top
en 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: inline
en 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;
}