1

Есть несколько инлайн блоков, которые размещаются по центру экрана, нужно выровнять третий по правому краю, не применяя свойство float (пример).

Файл .hml:

<!doctype html>
<html>
<head>
    <link rel='stylesheet' href='ReviewsStyles.css'>
</head>

<body>
    <div class='testDiv centerMargin'>
            <div class='testDiv3'>
                <div class='inlineBlock testDiv8'>
                    <div class='testDiv5 inlineBlock'>
                        4 отзыва
                    </div><!--
                    --><div class='testDiv6 inlineBlock'>X X X X X
                    </div>
                </div>

                <div class='button inlineBlock testDiv7'>
                    <span>поиск по отзывам</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Файл ReviewsStyles.css:

html, body{
height: 100%;
width: 100%;
margin: auto;
}
.testDiv{
background-color:red;
width:50%;
}
.testDiv2{
background-color:green;
height:25%;
}
.testDiv3{
background-color:yellow;
}
.testDiv5{
background-color:blue;
margin-top:5%;
margin-bottom:5%;
margin-left:auto;
margin-right:auto;
width:25%;
}
.testDiv6{
background-color:lime;
margin-top:5%;
margin-bottom:5%;
margin-left:5%;
margin-right:5%;
width:65%;
}

.testDiv8{
background-color:red;
width:70%;
}
.blackBackground{
background-color:black;
}
.centerMargin{
margin: 5% auto;
}
.inlineBlock{
display: inline-block;
}
.button{
border: 2px solid black;
padding: 5px;
width: 150px;
}

1 ответ 1

2

html, body{
height: 100%;
width: 100%;
margin: auto;
}
.testDiv{
background-color:red;
width:50%;
}
.testDiv2{
background-color:green;
height:25%;
}
.testDiv3{
background-color:yellow;
}
.testDiv5{
background-color:blue;
margin-top:5%;
margin-bottom:5%;
margin-left:auto;
margin-right:auto;
width:25%;
}
.testDiv6{
background-color:lime;
margin-top:5%;
margin-bottom:5%;
margin-left:5%;
margin-right:5%;
width:65%;
}

.testDiv8{
background-color:red;
width:70%;
}
.blackBackground{
background-color:black;
}
.centerMargin{
margin: 5% auto;
}
.inlineBlock{
display: inline-block;
}
.button{
border: 2px solid black;
padding: 5px;
width: 150px;
}

//мой код---------------------------


.testDiv7 {
    align-self: center;
}

.testDiv3{
    display: flex;
    justify-content: space-between;
 }
<body>
    <div class='testDiv centerMargin'>
            <div class='testDiv3'>
                <div class='inlineBlock testDiv8'>
                    <div class='testDiv5 inlineBlock'>
                        4 отзыва
                    </div><!--
                    --><div class='testDiv6 inlineBlock'>X X X X X
                    </div>
                </div>

                <div class='button inlineBlock testDiv7'>
                    <span>поиск по отзывам</span>
                </div>
            </div>
        </div>
</body>

надеюсь правильно понял что вы хотели. пс тут почему то желтый контейнер на всю высоту растягивается на у меня в браузере все норм паказывает. введите сюда описание изображения

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.