Как выровнять div по правомю краю

249

03 июня 2019, 13:40

Есть несколько инлайн блоков, которые размещаются по центру экрана, нужно выровнять третий по правому краю, не применяя свойство 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;
}

Answer 1

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>

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