Форум

cha0s · #1 (**permalink**) 01.06.2015, 11:06

Нарисовал на бумажке что требуется

значит в вкратце основной блок у нас 100%, внутри его 2 блока, один причем max-width:512px, а как сделать 2-ой чтоб он занимал все остававшиеся место?

ну допустим если внутри этого блока было бы один и второй по 50% все понятно, а тут один зараза max-width:512 имеет. Спасибо, можно просто на словах сказать!

(Без JS, Only CSS)

EmperioAf · #2 (**permalink**) 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 · #3 (**permalink**) 01.06.2015, 19:42

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

рони · #4 (**permalink**) 01.06.2015, 22:38

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 · #5 (**permalink**) 02.06.2015, 09:48

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

Форум

Справочник

Discord чат

Курсы javascript