右側のCSSで2つの画像を別々の線で整列する

これらの2つの画像を右に揃えたいが、それらを別々の線にしたい。今私が考えることができる唯一の方法は、画像の1つに対して非常に大きなマージンですが、より良い方法があるかどうか疑問に思っています。右側のCSSで2つの画像を別々の線で整列する

右の最初の画像の横に段落が表示されます。また、段落の背景がスクロールすると変わりますが、色の変化をテキストの周りに限定したいと思います。

これは私のコードで、このコードで

をしたい任意の画像を使用します。

<!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の方法を理解することは非常に重要ですあなたのクラスをより具体的にして、HTMLコードの構造を改善する必要があります。CSSの場合、margin：1000pxを使用するのは間違いです。間違っています！最大幅を設定しましたが、変更できます。電気ショック療法あなたのコード私はできる限り...しかし、あなたの問題を解決するには多くの良い方法がある

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で2つの画像を別々の線で整列する

答えて

関連する問題