Как обратиться к div внутри div

413
30 января 2017, 18:31

Здравствуйте.

Есть блок и внутри него ещё два блока. Хочу чтобы первый внутренний блок занимал левую часть экрана (50% экрана), а второй блок правую (50% экрана). Пробовал сделать сам, но так и не получилось. Не могу достучаться до div'ов внутри #father.

Пример:

#son { 
  height: 400px; 
  width: 300px margin-left: auto; 
} 
#daughter { 
  height: 400px; 
  width: 300px margin-right: auto; 
}
<div id="father"> 
  <div id="son">....</div> 
  <div id="daughter">....</div> 
</div>

Заранее спасибо.

Answer 1

#son{ 
  display: inline-block; 
  height: 400px; 
  width: 300px; 
  background-color: #3498DB; 
  margin: 0px; 
  padding: 0px; 
} 
#daughter{ 
  display: inline-block; 
  height: 400px; 
  width: 300px; 
  background-color: #E74C3C; 
  margin: 0px; 
  padding: 0px; 
}
<div id="father"> 
  <div id="son"></div><div id="daughter"></div> 
</div>

Answer 2

#father { 
  height: 100px; 
  width: 200px; 
  border: 2px solid blue; 
} 
#son { 
  height: 100%; 
  width: 50%; 
  margin-left: auto; 
  background: green; 
  float: left; 
} 
#daughter { 
  height: 100%; 
  width: 50%; 
  margin-right: auto; 
  background: red; 
  float: right; 
}
<div id="father"> 
 
  <div id="son"></div> 
  <div id="daughter"></div> 
 
</div>

Answer 3

Например, с использованием flex, т.к. float уже морально устарели :)

p.s. Добавил border для демонстрации

#father { 
  display: flex; 
  flex-direction: row; 
} 
 
#son, #daughter{ 
  height: 400px; 
  flex-grow: 1; 
  border: 1px solid red; 
} 
 
#daughter{ 
  border: 1px solid blue; 
} 
  
<div id="father"> 
  <div id="son">....</div> 
  <div id="daughter">....</div> 
</div>

READ ALSO
SASS\SCSS: селекторы разделенные запятой
CSS

SASS\SCSS: селекторы разделенные запятой

Есть подобный код на CSS

 405
Цепочка вызовов
c++

Цепочка вызовов

ЗдравствуйтеНа данный момент я нахожусь на начальном этапе изучения C++, поэтому хотел бы задать вопрос более опытным

 363
Как считать данные с консоли?
c++

Как считать данные с консоли?

Например, я пишу 'std::cout << 5'Как мне потом это значение считать с консоли? Upd: не самому вводить, а считать то, что уже вывело

 409
Задачники по C++ [требует правки]
c++

Задачники по C++ [требует правки]

Посоветуйте несколько книг для практики по основам языка программирования на C++Это могут быть как справочные пособия, так и какие-нибудь...

 386