Я только начал с HTML и CSS и, очевидно, все еще изучаю основы. У меня возникла проблема, которую я не понимаю, и надеюсь, что вы можете дать мне некоторое представление:

У меня проблема в том, что любой элемент, который я создаю в HTML / CSS, всегда отображается в верхнем левом углу экрана, в этом примере я создал 2 с и присвоил им размер 200 x 200 пикселей в CSS display: block. Я не указал никаких других значений, кроме цвета фона, чтобы сделать их видимыми.

Я ожидал, что div 1 будет в верхнем левом углу экрана, а div 2 будет начинаться сразу под div 1. Однако оба занимают одно и то же пространство.

Однако я понял, что элемент блочного уровня всегда начинается с новой строки. Так что мне не хватает?

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

Вот что у меня есть, самый простой эксперимент:

HTML

`<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div class="container1"></div>
<div class="container2"></div>
</body>
</html>`

CSS

.container1 {
display: block;
height: 200px;
width: 200px;
background-color: blue;
}

.container1 {
display: block;
height: 200px;
width: 200px;
background-color: crimson;
}

Я понимаю, что по умолчанию обоим div должен быть назначен атрибут блока по умолчанию, и при этом каждый блок должен начинаться с новой строки. Но они этого не делают. Контейнер 2 будет перекрывать контейнер 1. Это почему?

css
-1
Almightyblob 15 Окт 2019 в 09:57
В настоящее время оба контейнера в CSS имеют одинаковое имя, поэтому второй контейнер не отображается.
 – 
Scenus
15 Окт 2019 в 10:06

2 ответа

Пожалуйста, проверьте свое имя класса на container2 в файле CSS.

.container1 {
  display: block;
  height: 200px;
  width: 200px;
  background-color: blue;
}

.container2 {  /* Check name */
  display: block;
  height: 200px;
  width: 200px;
  background-color: crimson;
}
<div class="container1"></div>
<div class="container2"></div>
0
Allan Jebaraj 15 Окт 2019 в 10:03

** В вашем css переименуйте второй класс в container2, это проблема

.container1 {
display: block;
height: 200px;
width: 200px;
background-color: blue;
}

.container2 {
display: block;
height: 200px;
width: 200px;
background-color: crimson;
}

**

0
Vikas Patel 15 Окт 2019 в 10:04