Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Как такое реализовать? (responsive & max-width) (https://javascript.ru/forum/xhtml-html-css/56136-kak-takoe-realizovat-responsive-max-width.html)

cha0s 01.06.2015 11:06
Как такое реализовать? (responsive & max-width)
 
Нарисовал на бумажке что требуется

значит в вкратце основной блок у нас 100%, внутри его 2 блока, один причем max-width:512px, а как сделать 2-ой чтоб он занимал все остававшиеся место?:blink: ну допустим если внутри этого блока было бы один и второй по 50% все понятно, а тут один зараза max-width:512 имеет. Спасибо, можно просто на словах сказать!:write: (Без JS, Only CSS)

EmperioAf 01.06.2015 18:50
Можно так:
.div1 {
  max-width: 512px;
  border: 1px solid green;
  display: inline-block;
}
.div2 {
  width: calc(100% - 520px);
  border: 1px solid red;
  display: inline-block;
}

cha0s 01.06.2015 19:42
div1 не должен быть больше чем 512px по ширине, но он может быть меньше чем 512 спокойно, в твоём варианте идет статично, этот вариант годиться только если div1 будет всегда 512px, походу тут без JS не решается мне так кажется.

рони 01.06.2015 22:38
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>

cha0s 02.06.2015 09:48
воу! я такого даже не слышал никогда о flex, да работает, супер, спасибо! +++


Часовой пояс GMT +3, время: 11:40.