ребенок не тянется к родителю

Question

ребенок не тянется к родителю

0

Я не уверен, почему contactBox перекрывает поле mainInfo. Ящик контакта также не растягивается в его родительский контейнер, который равен 960px.

CSS

.mainInfo {
position:relative;
height:500px;
background-color: pink;
padding:30px 0 0 30px;

}

.col-6 .imagePlaceholder {
width:300px;
height:420px;
background-color: red;
}

.col-6 .about {
position: absolute;
top:30px;
left:414px;
padding:1em;
}

.contactBox {
height:450px;
background-color:green;
}

Вот скрипка JS: http://jsfiddle.net/2zm47/

ev9604 16 апр. 2014, в 02:13

Источник

Теги:

html

css

position

parent-child

2 ответа

0

Ваш HTML испорчен. Должно быть:

<div class="container">
   <div class="mainInfo">
            <div class="col-6">
                <div class="imagePlaceholder"></div>
            </div>

            <div class="col-6">
                <div class="about">
                    <p>...</p>
                    <p>...</p>
                </div>
            </div>
    </div>

   <div class="contactBox"></div>
</div>

TheFrozenOne 15 апр. 2014, в 21:39

Ещё вопросы

Britton · Accepted Answer · 2014-04-15T21-41-00.000Z

Я бы, вероятно, кодировал этот css по-разному, но

.mainInfo {
position:relative;
height:500px;
background-color: pink;
padding:30px 0 0 30px;

}

.col-6 .imagePlaceholder {
width:300px;
height:420px;
background-color: red;
}

.col-6 .about {
position: absolute;
top:30px;
left:414px;
padding:1em;
}

.contactBox {
height:450px;
background-color:green;
}

Надеюсь, это поможет. Я записал примечание в разделе JS скрипки.

http://jsfiddle.net/emersive/84WeT/1/

ооо верно, спасибо :) как бы вы кодировали CSS? Вы бы использовали позиционирование?
Как правило, вы должны избегать абсолютного позиционирования. Это определенно имеет свое применение. Я мог бы сначала начать с упрощения вашего html, чтобы следовать структуре, в которой вы хотите, чтобы ваш сайт работал более тесно. Если вы хотите, чтобы контент располагался бок о бок, лучше использовать поплавки. Это поможет вам, если вы хотите сделать сайт отзывчивым позже. Что, похоже, вы думаете о том, чтобы делать. Тогда я бы использовал поплавки, поплавки действительно важны для получения правильного макета. Через пару лет мы можем использовать flexbox и прочее. jsfiddle.net/emersive/84WeT/2