Проблемы наследования

Sintanial · October 30, 2011


<html>
  <head>
    <style>
      .a{height:400px;position:relative;background:red;}
      .b{height:100px;position:relative;background:blue; margin-top:20px;}
    </style>
  </head>
  <body>
    <div class='a'>
      <div class='b'></div>
    </div>
  </body>
</html>

Вопрос : Почему отступ идёт от верхней части окна браузера вместе с родителяем... .Ведь должен быть отсутп только от родителя

SelenIT · October 30, 2011

http://softwaremaniacs.org/blog/2005/09/05/css-layout-flow-margins/

ceil100 · October 31, 2011

родителю padding-top любой укажи, а то дочернему элементу не от чего отсчитывать margin вот он и считает от окна браузера

Sintanial · October 31, 2011

А почему не отчего ? Ведь он находится в родителе, так он и должен именно от него отсчитывать =)

А воообще это в статье которую кидали выше, подробно описано, о схлопывании отступов =).

ceil100 · October 31, 2011

бордер-коллапс здесь ни при чем

SelenIT · October 31, 2011

так он и должен

Интуиция (здравый смысл) и стандарты CSS1-2 редко идут рядом

бордер-коллапс

А его никто и не поминал

ceil100 · October 31, 2011

так он и должен

должен. да не обязан

о схлопывании отступов =)

поминал

SelenIT · October 31, 2011

ceil100, а что общего у отступов и бордеров?

ceil100 · October 31, 2011

ой извиняюсь

марджин коллапс

вот написал блин

смотрю и в упор не вижу

Edited October 31, 2011 by ceil100

SelenIT · October 31, 2011

марджин коллапс

А вот он очень даже причем . В чистейшем виде (один из самых неочевидных случаев).

Sintanial · November 3, 2011

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

Вот смотрите

http://jsfiddle.net/fWaC2/62/

Я хочу что бы второй элемент .child-two подстраивался под ширину первого либо под ширину родительского элемента. Короче главное что бы когда текст в первом элементе увеличивался ( а так само собой и сам элемент и родительский элемент), увеличивалась ширина второго блока вслед за первым ?????!?!?!?!?

А еще почему то .child-two странно обтекает первый див... ни снизу ни сверху... а что то между этим =)

Edited November 3, 2011 by Sintanial

ceil100 · November 4, 2011

если под ширину родительского то:

div.child_two {

background: none repeat scroll 0 0 #12FAEE;

border: 1px solid #DBDBDB;

display: inline-block;

padding: 20px;

position: relative;

width: 100px;

}

для второго случая:

при помощи .all регулируешь ширину


<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
    div.perent{
        color:#898989;
        width:inherit;
        background: red;
        overflow:hidden;
    }
        div.child_one{
            float:left;
            width:100%;
            background: #FBFBFB;
            border: 1px solid #DBDBDB;
        }
            div.news span.date_news{
                color: #6D8FB3;
            }
        div.child_two{
            float:left;
            width:100%;
            background: #12faee;
            border: 1px solid #DBDBDB;
        }
        .all{overflow:hidden;width:400px;float:left;}

        </style>
    </head>
    <body>
		<div class="perent">
			<div class="all">
				<div class="child_one">
					<span class="date_news">19 октября 2011</span><br>
					<p class="text_news">Китовая акула, в отличие от большинства других акул, питается только планктоном, отцеживая корм из воды с помощью особого цедильного аппарата, образованного жаберными дугами (подобный способ питания существует только у двух других акул — гигантской и большеротой).
					</p>
				</div>
				<div class="child_two">
					<p class="text_news">Китовая акула, в отличие от большинства других акул, питается только планктоном, отцеживая корм из воды с помощью особого цедильного аппарата, образованного жаберными дугами (подобный способ питания существует только у двух других акул — гигантской и большеротой).
					</p>
				</div>
			</div>
		</div>
    </body>
</html>

Edited November 4, 2011 by ceil100

Sintanial · November 4, 2011

Вот чёрт я оговрился. Мне под высоту надою. Когда добавляем текст, то первый дочерний элемент увеличивается по высоте.... я хочу что бы вместе с первым увеличивался и второй дочерний элемент =).

Sintanial · November 8, 2011

Я всё таки с этой проблемой так и не смог разобраться. Подскажите пожалуйста

http://jsfiddle.net/fWaC2/76/

1)Мне надо что бы строка поиска была прижата к низу на уровне низа БЛОКА 1. И когда блок 1 изменял высоту, то строка поиска так же изменяла свое положение по вертикали и опять же была на уровне снизу

2)Так же необходимо сделать так что бы блок2 так же менял высоту при смене высоты блока1.

3)И всё наоборот. Блок 2 увеличивается по высоте то блок 1 тоже увеличивается по высоте, поиск опять же прижат снизу =)

Задолбался это делать.... подскажите пожалуйста

amelice · November 8, 2011

Я всё таки с этой проблемой так и не смог разобраться. Подскажите пожалуйста
http://jsfiddle.net/fWaC2/76/
1)Мне надо что бы строка поиска была прижата к низу на уровне низа БЛОКА 1. И когда блок 1 изменял высоту, то строка поиска так же изменяла свое положение по вертикали и опять же была на уровне снизу
2)Так же необходимо сделать так что бы блок2 так же менял высоту при смене высоты блока1.
3)И всё наоборот. Блок 2 увеличивается по высоте то блок 1 тоже увеличивается по высоте, поиск опять же прижат снизу =)
Задолбался это делать.... подскажите пожалуйста

Покажите как должно быть?

Sintanial · November 8, 2011

Вот смотрите http://floomby.ru/content/LrUK0gRZUW/full/

На рис 1 показано обычное состояние

На рис 2 показано состояние когда левый край браузера уменьшили =)... блок новости потянулся вниз... а след за ним и блок с розовым фоном и блок поиска.... а блок рекламы в верху зафиксирован и потянулась только высота !

Justnewone · November 8, 2011

Вообще, поведение чисто табличное. Но если у Вас именно такой макет, то есть не картинка а только прямоугольники, залитые цветом - можно сделать бордерами. То есть, у главного блока очень большой бордер и внутри него находятся все остальные элементы, блок реклама с флоатом и отрицательным маргином вправо, чтобы встать на бордер, потом блок новости как есть, следом блок с поиском, с флоатом направо и отрицательными маргинами вправо, чтобы встать на бордер и вверх на 40 пикселей.

UPD:

Хотя, если и картинки, то тоже можно, вместо бордеров паддинги + бекграунд

Sintanial · November 8, 2011

эммм не понял вас причем тут бордер и всё остальное. Я нарисовал как должен вести себя объект.

Мне необходимо что бы при растяжении блока новостей, остальные блоки растягивались вместе с ним вот и всё. =)

http://jsfiddle.net/fWaC2/76/ - вот тут уже есть макет... Сейчас когда уменьшаешь правую границу браузера увеличивается высота БЛОКА 1 ....так мне надо сделать так что бы второй блок вместе с поиском был по высоте как первый

Edited November 8, 2011 by Sintanial

amelice · November 8, 2011

http://jsfiddle.net/fWaC2/76/ - вот тут уже есть макет... Сейчас когда уменьшаешь правую границу браузера увеличивается высота БЛОКА 1 ....так мне надо сделать так что бы второй блок вместе с поиском был по высоте как первый

как вариант попробуйте так сделать: http://jsfiddle.net/5TvVR/22/

Sintanial · November 8, 2011

так не подходит...если высота блока поиска будет большой то при растягивании экрана он будет залазить на второй блок

Sign In

Проблемы наследования

Question

Link to comment

Share on other sites

19 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information