Изменение размера родительского контейнера на основе дочернего содержимого

Я пытаюсь изменить размер родительского контейнера на основе его содержимого. В настоящее время он использует проценты для ширины. К сожалению, размер контейнера изображения не изменяется в зависимости от его содержимого.

Есть ли способ изменить размер дочернего контейнера на основе ширины его родителя (включая содержимое) или вместо этого изменить размер родителя? Или дочерний контент (то есть изображения) должен иметь разный размер, а не фиксированный размер? Большое спасибо.

ссылка JSFiddle

#content {
margin-top: 58px;
margin-right: 1.0416667%;
/* 10 div 960 */
float: right;
background-color: #dedede;
width: 72.7083333%;
/* 698 div 960 */
}

#gallery_container {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    background-color: #302200;
}
#gallery_container ul li {
    display: inline;
}
#gallery_container ul li img {
    padding-top: 10px;
}

javascript html css masonry
person zan    schedule 03.05.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Если вы хотите, чтобы родительский контейнер автоматически соответствовал размеру своего содержимого, у вас в основном есть три варианта:

1) В HTML вы можете использовать ТАБЛИЦУ. В таблицы уже встроены такие функции, и они работают везде. Таблицы также имеют возможность легко комбинировать фиксированные и динамические размеры.

2) В CSS вы можете установить «position: absolute» или «float» в родительском контейнере. Для этого, вероятно, потребуются и другие корректировки вашей структуры, но родительский контейнер автоматически "уменьшится" до размера своего содержимого.

3) В Javascript вы можете рассчитать размер содержимого, а затем установить размер родителя. Однако это, как правило, довольно медленно, так как вам нужно вычислить размеры содержимого, что имеет тенденцию быть рекурсивным и требует большого количества запросов DOM.

Если это не дает ответа на ваш вопрос, уточните, какое поведение вы хотите видеть в упомянутой вами демонстрации JSFiddle. Прямо сейчас я не совсем уверен, функциональность какого DIV ID вы действительно хотите изменить, и, кроме того, я не уверен, как вы хотите его изменить.

person likebike    schedule 04.05.2014
comment
Спасибо likebike и MilkyTech за ответы. В настоящее время при изменении размера окна контейнер содержимого имеет избыточный интервал (фон серого цвета), тогда как размер контейнера галереи имеет правильный размер (фон коричневого цвета). - person zan; 04.05.2014
comment
Благодарю за разъяснение. В вашем JSFiddle вы определили ширину: 72,7083333%; на div#content. Поскольку вы уже определили этот DIV как «плавающий», вам просто нужно удалить это определение «ширины», и размер контейнера автоматически изменится в соответствии с размером его содержимого. Отвечает ли это на ваш вопрос? :) - person likebike; 04.05.2014
comment
Привет, лайкбайк, я попытался удалить определение ширины или вместо этого установить для него максимальную ширину, но изображения свернутся только в 1 столбец :-( Похоже, мне нужно больше прочитать о Masonry и гибких макетах. Спасибо за вашу помощь. :-) - person zan; 04.05.2014
comment
@zan, ваш дизайн сталкивается с некоторыми внутренними ограничениями CSS. Вместо того, чтобы пытаться подогнать родителя под размер дочерних элементов, проще мыслить сверху вниз и определять размер родителей, а затем позволять дочерним элементам вписываться в них. Вы все равно не сможете добиться желаемого эффекта — вам нужно будет создать новый дизайн и просто принять ограничения CSS и HTML. Единственный способ добиться именно того, что вы описываете, - это использовать Javascript, который медленный и полон подводных камней, особенно для кросс-браузерной поддержки. - person likebike; 05.05.2014
comment
что именно вы пытаетесь сделать с помощью javascript? Является ли эта обновленная скрипта http://jsfiddle.net/P9S2z/23/ тем, что вы ищете? делать? - person Chris L; 05.05.2014
comment
еще лучше, измените размер изображений на странице: http://jsfiddle.net/P9S2z/26/ - person Chris L; 05.05.2014
comment
Примеры jsfiddle от Chris M — хороший компромисс и, вероятно, лучшие варианты для реального веб-сайта. С другой стороны, ни один из них не подходит родительскому контейнеру по размеру дочернего содержимого. Как упоминалось в Likebike, самый точный способ сделать это (при использовании JS для перекомпоновки ваших изображений) — использовать javascript, но это может быть довольно медленным. Я проголосовал за ответ likebike как за наиболее точный ответ на проблему изменения размера родительского контейнера, но на практике решение, подобное предложенному Крисом М., вероятно, является наиболее практичным (особенно если эта страница должна отображаться на мобильном устройстве). - person rsanden; 21.05.2014

arrow_upward
0
arrow_downward

удалите javascript, затем удалите атрибуты ширины из тегов img в hmtl и добавьте/измените css следующим образом для галереи с плавным изменением размера:

ul {
    margin:0;
    padding:0;
    list-style: none;
}
#wrapper {
    width: 100%;
}
#navigation {
    width: 100%;
}
#sidebar {
    padding-left: 1.0416667%;
    margin-left: 1.0416667%;
}
#gallery_container {
    margin: 0px auto;
    text-align: center;
    width: 90%;
}
#gallery_container img {
    width: 27%;
    margin: 2%;
}
person Chris L    schedule 03.05.2014