使用單獨的行在右側的css中對齊兩個圖像

我想在右側對齊這兩個圖像，但我希望它們位於單獨的行上。現在我唯一能想到的方法是對圖像中的一個有很大的餘量，但我想知道是否有更好的方法。使用單獨的行在右側的css中對齊兩個圖像

我希望段落出現在第一張圖片的右側。另外，段落的背景在滾動時會發生變化，但我想限制顏色變化僅限於文本。

使用任何你想要的圖片在此代碼

這是我的代碼：

<!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文件：

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; 
}

來源

2017-02-13 Jacob

哪裏你想要「gar」和「lol」文字嗎？ – affaz

所有這是非常重要的首先要明白的方式，HTML和css works.You應該更具體與您的類，並改善您的HTML代碼的結構。對於css使用margin：1000px是錯誤的。它是錯誤的！我設置最大寬度，但你可以改變它。我試圖corr ECT你的代碼，就像我可以......但也有很多更好的方法來解決您的問題

的html代碼：

<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代碼

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; 
}

來源

2017-02-13 17:44:33

使用單獨的行在右側的css中對齊兩個圖像

回答

相關問題