Испробовал уже несколько вариантов - через float, inline-block и flex, но верстка постоянно едет и возникает проблема с вертикальным выравниваем строк, одна выше другой.
-
Попробуйте таблицу.... Я не думаю, что здесь особо правильно было бы с css заморачиваться– LiaVa21 июн 2018 в 21:20
Добавить комментарий
|
1 ответ
.box {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
width: 300px;
border: 3px solid #000;
padding: 10px 20px 20px;
}
.title {
margin-bottom: 30px;
}
.line {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.line_left {
width: calc(65% - 10px);
margin-right: 10px;
text-align: right;
}
.line_right {
width: 35%;
font-weight: bold;
}
<div class="box">
<div class="title">Заголовок</div>
<div class="line">
<div class="line_left">Формат</div>
<div class="line_right">Данные</div>
</div>
<div class="line">
<div class="line_left">Просмотр</div>
<div class="line_right">Данные</div>
</div>
<div class="line">
<div class="line_left">Инструменты</div>
<div class="line_right">Данные</div>
</div>
</div>
-
Если вместо "Данные" будет более длинная строка, то все съезжает, что не есть хорошо 21 июн 2018 в 22:24