Выравнивание двух изображений в 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.It не так! Я устанавливаю max-width, но вы можете изменить его. Я пытался скомпоновать ЭСТ код столько, сколько я могу ... но есть много более эффективных способов, чтобы исправить вашу проблему

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 справа с отдельными линиями

ответ

Смежные вопросы