0

Нужно внутри дива поставить статичный див шириной 200px и динамический шириной 60% оставшегося места + 40%-й див в конце. Картинка:

alt text

Как сделать:

пытался так:

div 1 - width:100%; height:100%;
div 2 - width:200px;
div 3 - width:60%;
див 4 (пустота) - 40%

Но блоки создают страницу больше 100%. Откуда лишние проценты? Как будет правильнее?

2
  • habrahabr.ru/sandbox/71512
    – smackmychi
    14 сен 2014 в 16:39
  • Ну а чего вы хотите? Представим, что div1 шириной в 1000px, тогда div3, по заданным условиям будет 600px(или 60%), а div4 - 400px(или 40%). Т.е div3 вместе с div4 обладают 100%от родительского блока, от div1, а к ним еще и плюсуется div2, который фиксирован на 200px. В общей сложности получается div3+div2+div4=1200px. Если div1 задать overflow hidden, то правый из блоков обрежется.
    – moron
    14 сен 2014 в 18:47

2 ответа 2

1

http://jsfiddle.net/tLuhx0tk/ вот пример накидал, один из вариантов размещения таких блоков

0

Как вариант https://codepen.io/yamich/pen/ExYXQGP

HTML

<div class="container clearfix">
    <div class="div-200"></div>
    <div class="div-60"></div>
    <div class="div-end"></div>
</div>
CSS

div {
    height: 100px;
}
.div-200 {
    float: left;
    width: 200px;
    background-color: red;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.div-60 {
    float: left;
    width: 60%;
    background-color: green;
}
.div-end {
    float: left;
    width: calc(40% - 200px);
    background-color: blue;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.