Здравейте,
Правя си едно малко сайтче и наскоро се натъкнах на проблема с еднаквостта при височината на два от елементите, в случая "мястото където ще е същинската информация" и "дясната колона". Като попълня повече инфо в една от двете, другата остава грозно във въздуха, поразрових се в нета и открих множество решения, и понеже
не съм супер напреднал на CSS, избрах най-краткото и чисто (без JS). Резултата стана много добър:
<html>
<head>
<title>some test</title>
<link rel="stylesheet" type="text/css" href="testcss.css"/>
</head>
<body>
<div class="flexbox">
<div class="col">страница за новини</div>
<div class="col">страница за новини, която е с по-голям ред, страница за новини, която е с по-голям ред, страница за новини, която е с по-голям ред, страница за новини, която е с по-голям ред, страница за новини, която е с по-голям ред, страница за новини, която е с по-голям ред, страница за новини, която е с по-голям ред, страница за новини, която е с по-голям ред</div>
</div>
</body>
</html>Ето и CSS:
.flexbox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.flexbox .col {
flex: 1;
padding: 20px;
}
.flexbox .col:nth-child(1) {
background: #cc2138;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.flexbox .col:nth-child(2) {
background: #1945ee;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
Както се вижда обаче, двете колони си поделят по 50% от мястото, което в моя случай със сайта не ме устройва, примерно искам "контейнера" да е 760px широк, а дясната колона да е по-малка от него. Пробвах да задам custum width в самия .css файл, но нищо не се получава. Тук вече сте вие, ако може да ми помогнете с разрешаването на този проблем
