@cloudyone

Как div передвинуть влево, а остальные вправо, без float?

5c1ff2076aa0a512798530.jpeg
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="/style.css">
    <title>Message</title>
</head>
<body>
    <div class="wrap">
        <h1>Hello</h1>
        <div class="message">
            <div class="title">New message</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quisquam eum praesentium expedita vitae quae totam, voluptates possimus dolorem ex ducimus, in consequatur ipsa. Animi ullam nulla cupiditate commodi est.</div>
        </div>
        <div class="message">
            <div class="title">New message</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quisquam eum praesentium expedita vitae quae totam, voluptates possimus dolorem ex ducimus, in consequatur ipsa. Animi ullam nulla cupiditate commodi est.</div>
        </div>
        <div class="message">
            <div class="title">New message</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quisquam eum praesentium expedita vitae quae totam, voluptates possimus dolorem ex ducimus, in consequatur ipsa. Animi ullam nulla cupiditate commodi est.</div>
        </div>
        <div class="message">
            <div class="title">New message</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quisquam eum praesentium expedita vitae quae totam, voluptates possimus dolorem ex ducimus, in consequatur ipsa. Animi ullam nulla cupiditate commodi est.</div>
        </div>
    </div>
</body>
</html>


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

body {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
}

.wrap {
    max-width: 800px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    background-color: #f8f8f8;
}

.wrap .message:nth-child(even) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.wrap .message:nth-child(odd) {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.wrap .message:nth-child(odd) .title {
    background-color: #76cc00;
}

h1 {
    color: #0088cc;
    text-align: center;
    padding: 10px;
}

.message {
    color: #fff;
    max-width: 500px;
    min-height: 80px;
    padding: 20px;
}

.title {
    font-weight: 700;
    background-color: #0088cc;
    padding: 10px 20px;
    border-radius: 2px 2px 0 0;
}

.text {
    background-color: #4b616c;
    font-weight: 300;
    padding: 14px 20px 20px 20px;
    border-radius: 0 0 4px 4px;
}
  • Вопрос задан
  • 122 просмотра
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Spartan.by Минск
от 400 до 700 usd.
Alternativa Games Пермь
от 40 000 до 80 000 руб.
АМТ Екатеринбург
от 40 000 до 50 000 руб.