Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Как сделать, чтобы родительский блок менял размеры в зависимости от содержимого?

Доброго времени суток!
Возник такой вопрос. Как сделать, чтоб родительский блок автоматически изменял размеры при добавлении дочерних блоков?
Ниже приводится код. Добавил
CSS
1
.main{height:auto;.....}
Блок main исчез вообще.
А так, как приводится сейчас, родительскогоdiv хватает толок на 100%, потом он обрывается, и дочерние блоки добавляются уже не в нём.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML>
<html>
<head>
<title>train2
</title>
<style type="text/css">
body{background-color:#5FE168;width:100%;height:100%;position:absolute;margin:0;padding:0;}
.main{background-color:#D36BDF;width:60%;height:100%;left:20%;padding:0;position:absolute;}
.bl{position:relative;background-color:#0909EF;width:80%;height:25%;left:10%;margin-top:3%;margin-bottom:3%;margin-right:0;margin-left:0;}
</style>
</head>
<body>
<div class="main">
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
</div>
</body>
</html>
Ответ: Fatmarmelad,
1. Инлайновые блоки, без указанных явно размеров, принимают размер содержимого. Попробуйте в песочнице следующий пример
HTML5
1
<div>любой объект</div>
CSS
1
div{display:inline-block;border:1px solid red;}
и поиграйте значениями
CSS
1
display
, подставляя попеременно
CSS
1
block,inline,inline-block,inline-table,list-item,run-in,table,table-caption,table-cell,table-column и др.
Посмотрите на поведение блока. Также подставляйте разные объекты в div. Текст, картинка, другой див с содержимым.
2.
Сообщение от Fatmarmelad
Почему тег html получает размеры, как и body
не обращайте внимания, для вашего примера ни жарко ни холодно.Объяснять долго. В общем тупанул и забыл убрать. <html>
Вопрос: Выровнять фон по центру зв пределами родительского блока CSS

День добрый. Помогите решить проблемку. Уже который час бьюсь, ничего не получается.
Есть контейнер <div id="container"> </div> у которого в CSS задана максимальная ширина 1000px и он выравнивается по центру экрана. Подскажите, пожалуйста, как можно внутри данного контейнера расположить дочерний с заданным задним фоном, который выходил бы за пределы родительского блока "container" и при этом тоже центрировался по центру экрана?
В общем нужно сделать так: http://joxi.ru/1A5bJentbJnRrE
А у меня получается только так:http://joxi.ru/DmBXReGT4WwLAP
Ответ:
Код CSS
1
2
3
4
5
6
7
8
9
10
.block5_wrapper {
  width: 2000px;
  position: relative;
  left: -450px;
}
.container {
  min-width: 780px;
  max-width: 1100px;
  margin: 0px auto;
}
Вопрос: Горизонтальное выравнивание и высота родительского блока

Всем привет и заранее спасибо за внимание)

Вчера долго пытался понять, как сделать так, чтобы 3 дочерних блока с шириной по 20% выравнивались по центру, причем чтобы между ними было равное оставшееся расстояние, т.е. 10% - [блок 20%] - 10% - [блок 20%] - 10% - [блок 20%] - 10%.

В итоге остановился на варианте абсолютного позиционирования с left: 10%, left: 40% и right: 10% каждому блоку соответственно.

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

Погуглил, понял, что абсолютно позиционированные блоки не видны родителю. Решил проблему, на мой взгляд, костылем, добавил еще один пустой relative-блок, в котором прописал ту же фиксированную высоту. Проблема решилась, но на душе осталось как-то неспокойно.

Есть другие, более цивилизованные варианты растяжки родителя при абсолютно позиционированных блоках? И, возможно, вариант с расположением трех блоков в таком виде тоже есть более грамотный?
Ответ:
HTML5
1
2
3
4
5
<div class="wrapper">
  <div class="block first__block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.block {
  width:20%;
  height:50px;
  background:yellow;
  box-sizing:border-box;
  display:inline-block;
  margin:0 5%;
}
.first__block {
  margin-left:10%;
}
.wrapper {
  width: 600px;
  border:1px solid green;
}

Ну я вот делаю
Вопрос: Позиционирование относительно родительского блока

Здравствуйте!
Есть родительский блок и два дочерних. Задача: синий блок расположить в правом верхнем углу зеленого блока. Желтый блок разместить в правом нижнем углу, так, чтобы желтый элемент выходил за пределы зеленого блока на 30 пикселей по горизонтали и 30 по вертикали. И, наконец, сместить зеленый блок вправо на 40 пикселей.

исходный код
HTML5
1
2
3
4
5
6
<div>
            <div class="third-parent">
                <div class="blue"></div>
                <div class="yellow"></div>
            </div>              
        </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.third-parent {
            height: 400px;
            background: green;
            max-width: 700px;
            border: 5px solid black;
        }
 
        .blue {
            width: 50px;
            height: 50px;
            background: blue;
        }
 
        .yellow {
            width: 50px;
            height: 50px;
            background: yellow;
        }
Решение:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.third-parent {
            height: 400px;
            background: green;
            max-width: 700px;
            border: 5px solid black;
            position: relative;
            left: 40px;
 
        }
 
        .blue {
            width: 50px;
            height: 50px;
            background: blue;
            position: absolute;
            right: 0;
            top: 0;         
 
        }
 
        .yellow {
            width: 50px;
            height: 50px;
            background: yellow;
            position: absolute;
            right: -30px;
            top: 380px;
 
        }
При изменении высоты блока third-parent, с желтым квадратом явно что-то не так, как исправить эту ситуацию?
Спасибо.
Ответ: mrtoxas, Благодарю.
Вопрос: Как при наведении на дочерний блок менять стиль родительского блока

Здравствуйте, подскажите пожалуйста как при наведении на дочерний блок менять стиль родительского блока?
Например:
HTML5
1
2
3
<div class="blok1">
<div class="blok2"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
div.blok1{
background:red;
width:250px;
height:250px;
}
 
div.blok2{
background:yellow;
width:250px;
height:250px;
}
 
div.blok2:hover ~ div.blok1{background:blue;}
 Комментарий модератора 
Используйте соответствующие теги в редакторе для форматирования кода [HTML], [CSS] и т.д.!
Ответ: korol_lion, хотелось бы меньше js на сайте а то PageSpeed все ругается уберите js с верхней части и все такое хоть я и вставлю код внизу.
mrtoxas,все работает спасибо.
Вопрос: Не растягивается родительский блок по высоте дочерних

добрый вечер, помогите решить проблему, почему не растягивается родительский блок по высоте дочерних, флоатов нет в этом блоке.
<div class="block5">
<div class="browse">
<p>Browse by cuisines</p>
<div class="pink_strip5"></div>
</div>
<div class="cuisines">
<div class="italian"><div><p>327 Recipes</p><p>italian</p></div></div><div class="indian"><div><p>856 Recipes</p><p>indian</p></div></div><div class="french"><div><p>27 Recipes</p><p>french</p></div></div><div class="steak"><div><p>174 Recipes</p><p>steakhouse</p></div></div><div class="sea"><div><p>731 Recipes</p><p>seafood</p></div></div><div class="sushi"><div><p>237 Recipes</p><p>sushi</p></div></div><div class="mexican"><div><p>529 Recipes</p><p>mexican</p></div></div><div class="chinese"><div><p>145 Recipes</p><p>chinese</p></div></div><div class="pizza"><div><p>327 Recipes</p><p>pizza</p></div></div><div class="usa"><div><p>1.437 Recipes</p><p>american</p></div></div>
</div>
</div>

css:
.block5{
width: 100%;
height: auto;
}
.browse{
width: 100%;
position: relative;
top: 58px;
text-align: center;
}
.browse p{
font-family: "Lato", sans-serif;
font-weight: bold;
font-size: 18px;
line-height: 30px;
text-transform: uppercase;
color: #000000;
}
.pink_strip5{
width: 88px;
height: 1px;
background: url('img/pink_strip5.png');
margin: 0 auto;
position: relative;
top: 2px;
}
.cuisines{
width: 100%;
height: auto;
position: relative;
top: 100px;
text-align: center;
}
.cuisines div{
width: 320px;
height: 225px;
display: inline-block;
vertical-align: middle;
}
.cuisines div div{
display: table-cell;
}
.cuisines div p{
color: #ffffff;
}
.cuisines div p:first-child{
font-family: "Times", serif;
font-size: 15.37px;
font-weight: bold;
font-style: italic;
}
.cuisines div p:last-child{
font-family: "Lato", sans-serif;
font-size: 36px;
font-weight: bold;
text-transform: uppercase;
}
.italian{
background: url('img/it.jpg');
}
.indian{
background: url('img/ind.jpg');
}
.french{
background: url('img/fr.jpg');
}
.steak{
background: url('img/steak.jpg');
}
.sea{
background: url('img/sea.jpg');
}
.sushi{
background: url('img/sushi.jpg');
}
.mexican{
background: url('img/mex.jpg');
}
.chinese{
background: url('img/china.jpg');
}
.pizza{
background: url('img/pizza.jpg');
}
.usa{
background: url('img/usa.jpg');
}

Ответ: Да, действительно данное правило подтягивает нижнюю обертку под себя. Как выше и сказал, уберите top: и выдавливайте сверху паддингом. В теории я не смогу обьяснить почему так происходит, стоит погуглить. Однако в данной ситуации уместны паддинги, + старайтесь избегать жесткой высоты если она не требуется.
Вопрос: Смена родительского Блока (адаптивная верстка)

Наткнулся на подводный камень.
Может подскажете как реализовать.

Есть необходимость - в рамках адаптивной верстки менять родительский блок для определенного контента..а конкретнее (при больших разрешениях а 1600-1900) у сайта есть 2 сайд бара (левый и правый). но если разрешение меньше 1500 то правый сайдбар переходи в левый...

реализовано на js..
проверяем разрешение экрана если разрешение меньше 1500 проводим операцию перемещения контента в другой блок (innerHTML).

Но. ведь на больших мониторах пользователи могут менять размер окна браузера.. тоже нужно учитывать:
реализовал следующим образом..
стоит функция window.onresize ........ срабатывает если пользователь меняет размер окна. но.. для корректного отображения данных нужна перезагрузка браузера.... - то есть... то есть наша задача просто отловить сигнал и если размер менялся перегружаем - а там справится с данными первый алгоритм.. - все работает все отлично (на десктопах..)

И вот тут появился появился подводный камень. на все (на всех) смартфонах, мобильных устройствах.. (разрешения 320-1024).. постоянно срабатывает функция window.onresize... у меня нет мобильного интернета сам глянуть это происходит не могу.. но судя по показаниям веб веб-визора это происходит когда пользователь делает прокрутку экрана вниз...... (для пользователя это не сильно заметно- сайт работает быстро и при перезагрузке попадает в нужную точку страницы, но происходит бешеная накрутка показов.. средний показатель 20 перезагрузок в 1 минуту..(ну так оно и получается - на чтение экрана в телефоне уходит секунды 2-3+- и юзер крутит вниз и оно срабатывает ... ))...

я пределал временный костыль
первый алгоритм JS проверяет разрешение экрана (окна браузера) и если оно меньше 1024 то window.onresize уже не включается (простые условия иф).
И вот опять - казалось бы все устроило. но есть один неприятный момент:
НА ПК:
1 ) пользователь может уменьшить размер до 1000 по ширине или меньше а потом увеличить
2) с начало открыть у маленькоv окне а потом увеличить.
то есть.. переход контента с правого сайдбара в левый переходит отлично...
а переход обратно не знаю как отлавливать сигнал когда это нужно делать...
что то вот уже 2 недель бьюсь ничего толкового не придумали..

может кому удастся подскать.. - алгоритмы сами не нужны, (но не откажусь если будут и скажу второе спасибо) но мне бы что - тут можно попробовать ????

Конечно лучше 1 раз увидеть проблему, я мог описать непонятно
вот пациент
(уменьшите ширину окна браузера на 1000pх потом увеличьте до 1400 или больше (у кого разрешения такого нет боюсь вы не поймете)) и увидите косяк..(если нажмете - перегрузить браузер- оно все станет на свои места - но нужно чтобы оно как то само.... .)..

И.Отдельное спасибо тем кто подумал но ничего не придумал!

 
Ответ:
Не слышал. спасибо.
вечером погуглю по итогам прочтения отпишусь....
 
Вопрос: Высота родительского блока по контенту

Господа, как же все-таки правильно задать высоту родительского блока опираясь на контент?
Допустим, есть конструкция:
HTML5
1
2
3
<div calsss="papa">
<div class="oxyliard-teksta"><p>многа-многаа букаф</p></div>
</div>
При этом у родителя задана только резиновая ширина
CSS
1
.papa{widht:100%;}
Как же правильно задать ему высоту, ведь в зависимости от разрешения экрана теста будет или длиннее или уже и выше? Вставить
CSS
1
2
3
display: table;
или 
overflow:hidden;
Ваши комментарии? спасибо.
Ответ: Да, чего то я конкретно затупил, недосып и все такое) вы правы.
Вопрос: Вёрстка дочернихблоков в 50% ширины родительского

Доброго времени суток!
Подскажите пожалуйста способ (если он есть), как не прибегая к JS, разместить внутри родительского <div>(блока) четыре дочерних <div>(блока) по два в строке ширина и высота каждого будет равняться 50% значения родительского блока с интервалами и отступами.
Ширина и высота родительского блока задана в (px).
Заранее благодарен.
Ответ: AlexanderTravki, а почему оно должно быть нерациональным? Если на сайте родительский блок не должен адаптироваться почему бы и нет? Поаккуратней с флотами, а так всё норм...
Вопрос: Position родительского элемента

Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
<title>QQ</title>
<link rel="stylesheet" href="style.css" type="text/css" />
 
</head>
<body>
    <div id="cont">
         <div id="rep">
        <div id="pic">
            </div>
       </div>
</div>
</body>
</html>
Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body{background-image: url(bg.png);
}
#cont{
    position: relative;
    left: 100px;
}   
#rep{
    height: 400px;
    width: 400px;
    background-color: red;
    position: inherit;
}
#pic{
    height: 200px;
    width: 200px;
    background-color: yellow;
    position: inherit;
}
Вот я сделал 2 блока див и потом заключил два блока в 3 блок div.Получается блок cont это родительский блок и я пытался через значение position:inherit передвинуть сразу 2 блока но почему то не двигает что не так
Ответ:
Сообщение от Ascolon
не не знаю я смог все блоки передвинуть задавая значения только в родительском блоке.
Читаем