CSS float и HTML вопросы
У меня есть несколько вопросов по основам CSS, на которые я не смог понять или найти ответ.
Сначала я попытался разместить 3 тега div внутри другого тега div. Для первого основного тега div, содержащего 3 других тега, ничего не было установлено, кроме размера, который был 400px от 400px. Из остальных 3-х div внутри все были 20px от 20px, 1 был назначен float:left, а двум другим был назначен стиль с плавающей точкой. Все атрибуты были определены в стиле, и двум блокам Div, которые были float:right, был назначен один и тот же стиль. Моя проблема в том, что из двух div, тот, который появился последним в коде, появится в браузере первым, и я не понимал причины этого.
Вот код:
<html>
<head>
<style>
#main{
border: red 4px dashed;
width: 25%
height: 25%,
}
#left{
float: left;
width: 20px;
height: 20px,
}
#right{
float: right;
width: 20px;
height: 20px,
}
</style>
</head>
<body>
<div id = "main">
<div id = "left">1</div>
<div id = "right">2</div>
<div id = "right">3</div>
</div>
</body>
</head>
</html>
согласился - измените 'id = "left / right"' на 'class = "left / right"' (аргументы о семантике в сторону) и измените свой css на ".left" и ".right"
Могу я предложить разделить ваши вопросы? Так людям будет проще давать конкретные ответы :)
Ответы 7
My problem is that out of the 2 divs, the one that came last in the code, would appear first in a browser, and I did not understand the reasoning for this.
Я думаю, что Вы неправильно поняли слово «явись первым». Вы устанавливаете свои div, чтобы они перемещались вправо. Таким образом, div с цифрой "2", который ПЕРВЫМ в вашем коде, ПЕРВЫМ помещается вправо, поэтому он идет первым в правую сторону. Затем перемещается div "3", поэтому я переходит в левую часть div "2" - поскольку "2" был первым, он занял первое место в правой части окна браузера, а div "3" занял второе разместить в правой части окна.
В этом случае «второе место в правой части окна» означает «первое, если смотреть слева» ;-)
+1 это правильно - другие ответы указывают на некоторые другие проблемы с образцом кода, но они не решают проблему. этот ответ объясняет, что происходит.
Я не знаю о проблеме наслоения, но у вас не может быть двух элементов с одинаковым идентификатором. Вы, наверное, захотите:
...
<div class = "right">2</div>
<div class = "right">3</div>
...
и измените #right на .right в CSS.
это не изменит его ситуации. хотя это недопустимый HTML, браузер все равно будет "правильно" отображать CSS.
Возможно, но я предположил, что если вы делаете что-то «незаконное», браузер может интерпретировать это как угодно, что может не дать вам того, что вы ожидаете, в зависимости от браузера. Я считаю, что лучший способ Начало - это иметь правильный HTML.
Вы в целом правы, но в данном случае это ничего не меняет.
Я думаю, ваша проблема в том, что вы используете id вместо класса. Идентификатор должен быть уникальным, поэтому второй div с id = "right" является единственным с этим идентификатором.
Вы можете изменить свой код так, чтобы у вас было:
<div class = "right"> 2 </ div>
<div class = "right"> 3 </ div>
(вместо id = "right")
И в css у вас будет:
.Правильно {
float: right;
width: 20px;
height: 20px,
}
(вместо #right)
Сначала я бы использовал class, а не id для div. Но в css есть и опечатки:
#main{
border: red 4px dashed;
width: 25%; /* <-- Missing ; */
height: 25%; /* <-- change , to ; */
}
#left{
float: left;
width: 20px;
height: 20px; /* <-- change , to ; */
}
#right{
float: right;
width: 20px;
height: 20px; /* <-- change , to ; */
}
<html>
<head>
<style>
#main {
border: 4px dashed red;
display: block;
overflow: hidden;
}
#left {
float: left;
width: 20px;
height: 20px,
}
#right {
float: right;
width: 20px;
height: 20px,
}
</style>
</head>
<body>
<div id = "main">
<div id = "left">1</div>
<div id = "right">3</div>
<div id = "right">2</div>
</div>
</body>
</head>
</html>
Ответ, хотя и действительный код, не объясняет, ПОЧЕМУ вы изменили то, что изменили.
вы можете использовать этот код
<div id = "main">
<div id = "left">1</div>
<div id = "right">3</div>
<div id = "right">2</div>
</div>
Вы не можете использовать один и тот же идентификатор более одного раза.
<div class = "right">2</div>
<div class = "right">3</div>
Лучше вы можете сделать это с помощью назначения класса.
у вас, вероятно, не должно быть двух DIVS с идентификатором "right" - идентификаторы должны быть уникальными.