@CcJn

Как прижать элемент к правой стороне?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/index.js"></script>
  <title>Bodybuilding</title>
</head>
<body>
	<header>
	    <div class="container">
	        <div class="header-container-center">
	            <h1>BodyBuilding History</h1>
	        </div>
	    </div>
	</header>
	<main>
	    <div class="container">
	        <div class="wall">
	            <div class="wall-post">
	                <img class="wall-post-image" src="./src/img/1.jpg">
	                <div class="wall-post-container">
	                    <h1 class="wall-post-date">1867</h1>
	                    <p class="wall-post-description">Evgeny Sandov became the founder of bodybuilding, showing his form to people</p>
	                </div>
	            </div>
	            
	            <div class="wall-post">
	                <img class="wall-post-image" src="./src/img/1.jpg">
	                <div class="wall-post-container">
	                    <h1 class="wall-post-date">1867</h1>
	                    <p class="wall-post-description">Evgeny Sandov became the founder of bodybuilding, showing his form to people</p>
	                </div>
	            </div>
	        </div>
	    </div>
	</main>
</body>
</html>


* { 
    margin: 0; 
    padding: 0;
    
    box-sizing: border-box;
    
    font-family: serif;
}

body {
    background-color: #1e1e1e;
    
    color: #fff;
}

.container {
    padding: 15px;
}

/** Стилизация шапки **/
header {
    height: 100vh;
    width: 100%;
    
    background-image: url('../src/img/header.png');
    background-size: cover;
    background-position: center;
}

.header-container-center {
    height: 100vh;
    width: 100%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    text-shadow: 0 0 15px #000;
    
    @media (orientation: landscape) {
        font-size: 3em;
    }
}

/** Стена **/
.wall {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    
    padding: 10vh;
}

.wall-post {
    display: flex;
    gap: 20px;
    
    width: 100%;
}

.wall-post:nth-child(even) .wall-post-image {
    order: 2;
}
.wall-post:nth-child(even) {
    /* нужно прижать элемент к краю */
}

.wall-post-image {
    height: 20vh;
    width: 20vh;
}

.wall-post-date {
    font-size: 3em;
}

.wall-post-container {
    max-width: 20vw;
    
    order: 1;
}
  • Вопрос задан
  • 100 просмотров
Решения вопроса 1
@CcJn Автор вопроса
Решил
.wall-post:nth-child(even) {
    justify-content: end;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы