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