Поддержание родительского div до ширины и высоты обертывания детей

Я строю простой календарь. Я хочу, чтобы месяцы быстро реагировали на экран и родительский контейнер, чтобы сохранить ширину и высоту своих детей. Например, если экран имеет ширину 950 пикселей и месяцы 100x100, у меня будет 9 месяцев на одной строке, а три на следующем, с родительским контейнером, равным 900 x 200. До сих пор мне удалось получить размер только 900 x 0 с родительским дисплеем, установленным на «inline» или 910 x 200 с родительским дисплеем, установленным на «встроенный блок».Поддержание родительского div до ширины и высоты обертывания детей

Надеюсь, я объяснил, что ОК?

За то, что он стоит здесь, в моем коде ...

EDIT В попытке прояснить эту проблему, я добавил синий фон. Я хотел бы получить некоторый отзывчивый код, который, независимо от экрана с, не будет показывать синий справа от самого большого ребенка (месяца) div.

<html> 
 
    <head> 
 
     <style> 
 
     .cal {position:relative; display:inline-block; border:3px solid yellow; box-sizing:border-box; background-color:blue} 
 
     .month {float:left; width:250px; height:170px; border:3px solid red; background-color:white; box-sizing:border-box;} 
 
     </style> 
 
    </head> 
 
    <body> 
 
    <div class="cal"> 
 
     <div class="month">Jan</div> 
 
     <div class="month">Feb</div> 
 
     <div class="month">Mar</div> 
 
     <div class="month">Apr</div> 
 
     <div class="month">May</div> 
 
     <div class="month">Jun</div> 
 
     <div class="month">Jul</div> 
 
     <div class="month">Aug</div> 
 
     <div class="month">Sep</div> 
 
     <div class="month">Oct</div> 
 
     <div class="month">Nov</div> 
 
     <div class="month">Dec</div> 
 
    </div> 
 

 
    </body> 
 
    </html>

Благодаря

источник

2015-11-28 Jules

Что именно вы хотите, чтобы этого не случилось? – Rooster

Я хочу, чтобы родительский div создавал окно вокруг дочерних divs, без какого-либо пустого пространства между правой рукой и дочерней дочерней папкой. В настоящий момент ширина родителя отображается на уровне 100% независимо. – Jules

@Jules Мне удалось использовать flexbox, чтобы получить календарь с его родительским контуром *, сжатым вокруг содержимого. Я предположил, что вы хотите фиксированные размеры для дочерних divs, к сожалению, я не думаю, что существует жизнеспособное обходное решение без растягивания дочерних div. Мне удалось получить только половину ширины таблицы. :( – zer00ne

Таким образом, вы хотите, чтобы родитель сжиматься снова, чтобы соответствовать ширине детей каждый раз, когда ребенок обертку. Я боюсь, что нет чистого метода CSS для этого.

Не меняйте свои спецификации, но я предлагаю сохранить родителя со 100% шириной и растягивать/сужать детей, чтобы они соответствовали родительскому. Я, конечно, не знаю, подходит ли это вам, или если ширина детей должна быть исправлена. Если это опция, запросы на гибкую бумагу или медиа - это два хороших способа обойти это. Если это не так, вам придется прибегнуть к JavaScript.

Вот пример использования медиа-запросов и calc():

.cal { 
 
    box-sizing: border-box; 
 
    position:relative; 
 
    display:inline-block; 
 
    min-width: 100%; 
 
    border:3px solid yellow; 
 
} 
 
.month { 
 
    box-sizing: border-box; 
 
    float:left; 
 
    width:calc(100%/12); 
 
    height:170px; 
 
    border:3px solid red; 
 
} 
 
@media (max-width: 900px) { .month { width: calc(100%/6); } } 
 
@media (max-width: 600px) { .month { width: calc(100%/4); } } 
 
@media (max-width: 400px) { .month { width: calc(100%/3); } }

<div class="cal"> 
 
    <div class="month">Jan</div> 
 
    <div class="month">Feb</div> 
 
    <div class="month">Mar</div> 
 
    <div class="month">Apr</div> 
 
    <div class="month">May</div> 
 
    <div class="month">Jun</div> 
 
    <div class="month">Jul</div> 
 
    <div class="month">Aug</div> 
 
    <div class="month">Sep</div> 
 
    <div class="month">Oct</div> 
 
    <div class="month">Nov</div> 
 
    <div class="month">Dec</div> 
 
</div>

JSFiddle.

Если вы действительно хотите в .month с, чтобы быть фиксированной шириной, вот немного-кода, который будет делать то, что вы хотите:

var calcWidth = function() { 
    var maxCalWidth = document.body.clientWidth - 9, 
     monthWidth = 77, 
     monthsPerRow = parseInt(maxCalWidth/monthWidth), 
     newWidth = monthsPerRow * monthWidth + 9; 
    document.querySelector('.cal').style.width = newWidth + 'px'; 
}; 

calcWidth(); 

window.onresize = calcWidth;

внимание, что некоторые номера жестко закодировано.Вы, вероятно, не хотите этого делать, я просто ленился без jQuery. Вот JSFiddle for that.

источник

2015-11-28 19:16:27 bowheart

Ваш код почти идеально, просто применить box-sizing:border-box; к .cal и .month элементов. потому что ширина границы исключена из ширины без использования border-box.

Я думаю, что это не возможно с CSS, я мог бы найти наилучшее решение для Вашего ответа на мой следующий код

<html> 
    <head> 
     <style> 

     .cal {position:relative; display:inline-block; border:1px solid yellow; text-align: center;} 
     .month {float:none; margin:3px -2px; width:180px; height:170px; border:2px solid red; display: inline-block;} 
     </style> 
    </head> 
    <body> 
    <div class="cal"> 
     <div class="month">Jan</div> 
     <div class="month">Feb</div> 
     <div class="month">Mar</div> 
     <div class="month">Apr</div> 
     <div class="month">May</div> 
     <div class="month">Jun</div> 
     <div class="month">Jul</div> 
     <div class="month">Aug</div> 
     <div class="month">Sep</div> 
     <div class="month">Oct</div> 
     <div class="month">Nov</div> 
     <div class="month">Dec</div> 
    </div> 


    </body> 
    </html>

Мы можем просто сделать его немного лучше смотреть на центрирование всех детей, потому что зарезервирован пространство на первой строке нельзя было вычесть из ширины родителя.

источник

2015-11-28 18:17:51

Нет, это не решает Я боюсь, ширина родителя до сих пор расширяется до 100%. – Jules

. Пожалуйста, взгляните на мой отредактированный ответ, это лучшее возможное решение, которое я мог найти. –

Спасибо, что посмотрели, но это пока не совсем тот эффект, который я ищу. Я не уверен, что изначально я объяснил эту проблему очень хорошо. Я редактировал вопрос, чтобы надеяться, прояснить ситуацию. Возможно, это невозможно, конечно. – Jules

html, 
 
body { 
 
    box-sizing: border-box; 
 
    font: 400 16px/1.5'Palatino Linotype'; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    overflow-x: auto; 
 
    overflow-y: auto; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 
body { 
 
    background-color: #222; 
 
    color: #EFE; 
 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
} 
 
.shell { 
 
    display: flex; 
 
    position: relative; 
 
    padding: 1.5em .75em; 
 
    margin: 0 auto; 
 
    height: 300%; 
 
    width: 300%; 
 
    width: -moz-max-content; 
 
    width: -webkit-max-content; 
 
    width: max-content; 
 
} 
 
.content { 
 
    position: absolute; 
 
    font-variant: small-caps; 
 
    left: 0; 
 
} 
 
.cal { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    outline: 3px solid yellow; 
 
    width: -moz-min-content; 
 
    width: -webkit-min-content; 
 
    width: min-content; 
 
    max-width: 900px; 
 
    flex: 3 0 90%; 
 
} 
 
.month { 
 
    float: left; 
 
    width: 250px; 
 
    height: 170px; 
 
    outline: 3px solid red; 
 
    display: inline-block; 
 
    flex: 1 1 50%; 
 
}

<html> 
 

 
<head> 
 

 
</head> 
 

 
<body> 
 
    <section class="shell"> 
 
    <div class="cal content"> 
 
     <div class="month">Jan</div> 
 
     <div class="month">Feb</div> 
 
     <div class="month">Mar</div> 
 
     <div class="month">Apr</div> 
 
     <div class="month">May</div> 
 
     <div class="month">Jun</div> 
 
     <div class="month">Jul</div> 
 
     <div class="month">Aug</div> 
 
     <div class="month">Sep</div> 
 
     <div class="month">Oct</div> 
 
     <div class="month">Nov</div> 
 
     <div class="month">Dec</div> 
 
    </div> 
 
    </section> 
 

 
</body> 
 

 
</html>

источник

2015-11-28 18:31:04 zer00ne

Поддержание родительского div до ширины и высоты обертывания детей

ответ

Смежные вопросы