CSS div позиционируется не так, как ожидалось

0

Я создал два div на моем веб-сайте. Первый div, который имеет цветную аквау, получил высоту 200 пикселей. следующий div был дан после некоторого дополнения. но высота оригинального div теперь уменьшена. это не 200px больше. предложите способ разместить второй div вскоре после первого, не уменьшая/перекрывая первый.

HTML

<!doctype html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css" >
<script src="JavaScript.js"></script>
</head>
<body>
<div>
<ul id="nav">
            <li id="click"><a href="#">Contact</a></li>
            <li> <a href="#">Blog</a></li>
            <li> <a href="#">Work</a></li>
            <li> <a href="#">About</a></li>
            <li> <a href="#">Home</a></li>
</ul>
</div>
<div>
<img src="image.jpg" style="width: 100%">
</div>
<div id="tagline">
<p>Miss Baker flight was another milestone in the history of space flight…</p>
<div>
<div style="padding: 200px; background-color: red">
<p>Haha, it worked!!!</p>
</div>
</body>
</html>

CSS

body {
margin: 0;
}
#nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#nav li {
    width: 20%;
    float: left;
    text-align: center;
    display: inline;
}
#nav li a {
line-height: 40px;
    display: block;
    padding: 0.5em 5px;
    text-decoration: none;
    font-weight: bold;
    color: #F2F2F2;
    -webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
    box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
}
#nav a:link, #nav a:visited {
    background-color: #071726;
}
#nav a:hover, #nav a:active, #nav a:focus {
    background-color: #326773;
}
#tagline {
height: 200px;
background-color: aqua;
}

img {display:block;}
p {margin:0;}

Здесь скрипка

http://jsfiddle.net/uxrN5/

  • 0
    Пожалуйста, добавьте скрипку: jsfiddle.net
  • 0
    jsfiddle.net/uxrN5
Показать ещё 4 комментария
Теги:

2 ответа

2
Лучший ответ

Наиболее вероятным виновником является строка 23:

<div>

Вы, вероятно, имели в виду:

</div>

Это изменение сделало бы HTML действительным, а также сделало бы красный элемент div родственным тегом, а не дочерним, что, вероятно, вам нужно.

http://jsfiddle.net/uxrN5/3/

Поделиться
  • 0
    Спасибо, приятель. я никогда не видел то же самое.
0

Перекрытие произошло, так как вы случайно пропустили, чтобы закрыть div tagline:

<div id="tagline">
<p>Miss Baker flight was another milestone in the history of space flight…</p>
</div>
<div style="padding: 200px; background-color: red">
<p>Haha, it worked!!!</p>
</div>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню