Heim > Web-Frontend > CSS-Tutorial > Verwenden Sie CSS, um Text auf der rechten Seite des Bildes zu erstellen

Verwenden Sie CSS, um Text auf der rechten Seite des Bildes zu erstellen

藏色散人
Freigeben: 2023-01-03 09:25:01
Original
18410 Leute haben es durchsucht

So verwenden Sie CSS, um Text auf der rechten Seite des Bildes anzuzeigen: Erstellen Sie zunächst eine HTML-Beispieldatei, fügen Sie dann ein Bild über das img-Tag ein und verwenden Sie schließlich das Float-Attribut haben Sie Text auf der rechten Seite des Bildes.

Verwenden Sie CSS, um Text auf der rechten Seite des Bildes zu erstellen

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5- und CSS3-Version, Dell G3-Computer.

html+css Es gibt Bilder auf der linken Seite und Text auf der rechten Seite.

Es ist ganz einfach. Das Codebeispiel ist wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
    .photo{
        float:left;
        width:20%;

    }
    .intro{
        float:right;
        width:70%;
    }
</style>
</head>
<body>
<div class="golf">
    <div class="photo"><img  src="02.png" alt="Verwenden Sie CSS, um Text auf der rechten Seite des Bildes zu erstellen" ></div>
    <div class="intro">
        <h3>高尔夫</h3>
        <p>高尔夫球运动是一项健康、绿色、快乐、回归自然的体育运动,打高尔夫球能让人体验挑战与激情,实现人与自然的和谐。人与人礼貌谦让的良好运动精神,是高尔夫球运动的精髓所在。山东的高尔夫球场近30家,全部是按国际标准建造的,场内服务功能及设施完备,是比赛、会议、旅游休闲、商务于一体的度假场所,来山东打高尔夫球定会让您亲身体验到高尔夫应享的尊贵服务。
 </p>
    </div>
</div>
</body>

</html>
Nach dem Login kopieren

Der Laufeffekt ist wie folgt:

Verwenden Sie CSS, um Text auf der rechten Seite des Bildes zu erstellen

[Empfohlen: CSS-Video-Tutorial]

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um Text auf der rechten Seite des Bildes zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage