Проблема стиля HTML5 CSS - PullRequest
Новая
       7

Проблема стиля HTML5 CSS

0 голосов
/ 20 марта 2019

Не могу заставить работать мой тег div css Может кто-нибудь указать на ошибку, которую я здесь делаю.Пытаясь сделать так, чтобы один div занимал 70% страницы (слева направо), остальные два div разделяют оставшуюся часть.Добавлен цвет, чтобы я мог видеть, правильно ли, но не отображается вообще. 

#master {
  width: 70%;
  top: 0;
  left: 0;
  background: orange
}

#detail1 {
  top: 0;
  left: 70%;
  background: blue
}

#detail2 {
  top: 50%;
  left: 70%;
  background: green
}
<header>
</header>

<div id="master"></div>
<div id="detail1"></div>
<div id="detail2"></div>

<aside>
  Hello Ben
</aside>

<footer>
</footer>

Ответы [ 4 ]

2 голосов
/ 20 марта 2019

Добавьте высоту к вашим дивам 

#master {
  width: 70%;
  top: 0;
  left: 0;
  background: orange;
      height: 15px;
}

#detail1 {
  top: 0;
  left: 70%;
  background: blue;
      height: 15px;
}

#detail2 {
  top: 50%;
  left: 70%;
  background: green;
      height: 15px;
}
<header>
</header>

<div id="master"></div>
<div id="detail1"></div>
<div id="detail2"></div>

<aside>
  Hello Ben
</aside>

<footer>
</footer>
1 голос
/ 20 марта 2019

Я считаю, что для решения вашей проблемы, вы должны добавить позицию к вашему CSS.Более того, чтобы получить главный div сверху вниз, его высота должна быть определена как ширина для деталей, чтобы использовать оставшуюся часть экрана.Вот так: 

<!DOCTYPE html> <html> <head>
    <meta charset="utf-8" />
    <title>My new Page II</title>
    <style>
        #master{
            position: absolute;
            top: 0;
            left: 0;
            width:70%;            
            height: 100%;

            background: orange
        }
        #detail1{
            position: absolute;
            top: 0;            
            left: 70%;
            height: 50%;
            width: 30%;
            background: blue
        }

        #detail2{
            position: absolute;
            top: 50%;            
            left: 70%;
            height: 50%;
            width: 30%;
            background: green
        } 
    </style> 
</head> 
<body>
    <header>
    </header>

    <div id="master"></div>
    <div id="detail1"></div>
    <div id="detail2"></div>

    <aside>
        Hello Ben
    </aside>

    <footer>
    </footer> </body> </html>
1 голос
/ 20 марта 2019

Поскольку ваши блоки div (master, detail1, detail2) пусты, они не будут отображаться вообще.Введите некоторый контент или установите высоту с помощью атрибута css height.

0 голосов
/ 20 марта 2019

Вы должны указать высоту блока div.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...