오른쪽에 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가 작동합니다. 클래스에 좀 더 구체적이어야하고 HTML 코드에서 구조를 개선해야합니다. CSS의 경우 여백 : 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로 두 이미지 정렬 별도의 줄로

답변

관련 문제