Как такое реализовать? (responsive & max-width)
Нарисовал на бумажке что требуется
![]() значит в вкратце основной блок у нас 100%, внутри его 2 блока, один причем max-width:512px, а как сделать 2-ой чтоб он занимал все остававшиеся место?:blink: ну допустим если внутри этого блока было бы один и второй по 50% все понятно, а тут один зараза max-width:512 имеет. Спасибо, можно просто на словах сказать!:write: (Без JS, Only CSS) |
Можно так:
.div1 { max-width: 512px; border: 1px solid green; display: inline-block; } .div2 { width: calc(100% - 520px); border: 1px solid red; display: inline-block; } |
div1 не должен быть больше чем 512px по ширине, но он может быть меньше чем 512 спокойно, в твоём варианте идет статично, этот вариант годиться только если div1 будет всегда 512px, походу тут без JS не решается мне так кажется.
|
css правая колонка на всю оставшуюся ширину
cha0s,
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <style type="text/css"> html, body{ height: 100%; margin: 0; padding: 0; } .flex-container { display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; width: 100%; height: 90%; background-color: green; } .flex-item { background-color: red; min-height:88%; margin: 5px; } .item2 { -webkit-flex: 1; flex: 1; } .item1 { max-width: 512px; } </style> </head> <body> <div class="flex-container"> <div class="flex-item item1">item 1<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi, inquam, qui te id ipsum rogavi? <b>Tu quidem reddes;</b> Nam quid possumus facere melius? Septem autem illi non suo, sed populorum suffragio omnium nominati sunt. Aliter enim explicari, quod quaeritur, non potest. <mark>Itaque fecimus.</mark> </p></div> <div class="flex-item item2">item 2</div> </div> </body> </html> |
воу! я такого даже не слышал никогда о flex, да работает, супер, спасибо! +++
|
Часовой пояс GMT +3, время: 11:40. |