Ausrichten von zwei Bildern in CSS auf der rechten Seite mit separaten Zeilen

Ich möchte diese beiden Bilder auf der rechten Seite ausrichten, aber ich möchte, dass sie auf separaten Zeilen sind. Im Augenblick ist die einzige Methode, die ich mir vorstellen kann, ein sehr großer Spielraum für eines der Bilder, aber ich frage mich, ob es einen besseren Weg gibt.Ausrichten von zwei Bildern in CSS auf der rechten Seite mit separaten Zeilen

Ich möchte die Absätze neben dem ersten Bild, auf der rechten Seite erscheinen. Auch der Hintergrund der Absätze ändert sich beim Scrollen, aber ich möchte die Farbänderung auf den Text beschränken.

keine Bilder Verwenden Sie in diesem Code wollen

Dies ist mein Code:

<!DOCTYPE HTML> 
<html> 
<head> 
    <title> Stack Overflow Question </title> 
    <link rel="stylesheet" type="text/css" href="./css/q7.css"></link> 
</head> 
<body> 
    <h1> Holla lolla lolla la </h1> 
    <figure id=real> 
     <img src="images/RealDog.jpg" </img> 
     <figcaption>Figure 1. Real Dog</figcaption> 
    </figure> 
    <p id="Gar"> Gar Gar Gar </p> 
    <p id="lol"> lol lol lol </p> 
    <figure id=fake> 
     <img src="images/FakeDog.jpg"></img> 
     <figcaption>Figure 2. Fake Dog</figcaption> 
    </figure> 
</body> 
</html>

Css-Datei:

body { 
    font-family: sans-serif; 
    font-weight: normal; 
    background-color: #EDEDED; 
} 
h1 { 
    color: blue; 
    font-weight: normal; 
} 
img { 
    height: 100px; 
    /*display: block;*/ 
} 
p:hover { 
    background-color:white; 
} 
#Gar { 
    float: right; 
    color: blue; 
    margin-right: 100px; 
} 
#lol { 
    float: right; 
    color: blue; 
    margin-right: 100px; 
} 
figure { 
    float: right; 
    margin-left: 1000px; 
}

Quelle

2017-02-13 Jacob

wo willst du den 'gar' und' lol' Text haben? – affaz

Zunächst einmal ist es sehr wichtig ist, die Art und Weise zu verstehen, dass html und css funktioniert.Sie sollten spezifischer mit Ihren Klassen und verbessern Sie Ihre Struktur in HTML-Code.Für CSS ist es falsch, Marge zu verwenden: 1000px.Es ist falsch! Ich setze max-Breite, aber Sie können es ändern.Ich habe versucht, corr ect Ihren Code so viel wie ich kann ... aber es gibt viel bessere Möglichkeiten, um Ihr Problem

HTML-Code zu beheben:

<div class = "container"> 
    <h1> Holla lolla lolla la </h1> 
    <div class="right-part"> 
    <figure id=real> 
    <img src="images/RealDog.jpg" </img> 
    <figcaption>Figure 1. Real Dog</figcaption> 
    </figure> 
<div class="two-p"> 
    <p id="Gar"> Gar Gar Gar </p> 
    <p id="lol"> lol lol lol </p> 
</div> 
    <figure id=fake> 
    <img src="images/FakeDog.jpg"></img> 
    <figcaption>Figure 2. Fake Dog</figcaption> 
    </figure> 
</div>

CSS-Code

body { 
    font-family: sans-serif; 
    font-weight: normal; 
    background-color: #EDEDED; 
} 
.container{ 
    position:relative; 
    max-width:900px; 
    margin:0 auto; 
} 
h1 { 
    color: blue; 
    font-weight: normal; 
    display: inline-block; 
    vertical-align: top; 
} 
.right-part { 
    display: inline-block; 
} 
p:hover { 
    background-color:white; 
} 
#Gar { 
    color: blue; 
} 
#lol { 
color: blue; 
} 
.two-p { 
    display: inline-block; 
    vertical-align: top; 
} 
figure#real { 
    display: inline-block; 
}

Quelle

2017-02-13 17:44:33

Ausrichten von zwei Bildern in CSS auf der rechten Seite mit separaten Zeilen

Antwort

Verwandte Themen