Вопросы по CSS и HTML

StackOverflow https://stackoverflow.com/questions/295611

  •  08-07-2019
  •  | 
  •  

Вопрос

У меня есть несколько вопросов об основах CSS, которые я не смог понять или найти ответ.

Сначала я попробовал разместить 3 тега div внутри другого тега div.Для первого основного тега div, содержащего три других тега, не было установлено ничего, кроме размера, который был 400px к 400px.Из остальных трех дивизий внутри все были 20px к 20px, и было присвоено 1 float:left, а двум другим был присвоен стиль float right.Все атрибуты были определены в стиле, а два элемента 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>
Это было полезно?

Решение

  

Моя проблема в том, что из двух дел,   тот, который пришел последним в коде,   появится в браузере первым, а я   не понял причины   это.

Я думаю, что Вы неправильно поняли & "появитесь первым &". Вы устанавливаете свои div'ы, чтобы они плавали правильно. Итак, & Quot; 2 & Quot; div, который является ПЕРВЫМ в Вашем коде, является ПЕРВЫМ, чтобы быть смещенным вправо, поэтому он идет первым к правой стороне. & Quot; 3 & Quot; После этого передается значение div, поэтому я перехожу к левой части " 2 " div - потому что " 2 " был первым, он занял первое место в правой части окна браузера, и div " 3 " занял второе место с правой стороны окна.

В этом случае " второе место в правой части окна " означает " во-первых, глядя слева " ; -)

Другие советы

Сначала я бы использовал 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 ; */
}

Я не знаю о проблеме с наложением, но у вас не может быть двух элементов с одинаковым идентификатором. Вы, вероятно, хотите: 

...
<div class="right">2</div>
<div class="right">3</div>
...

и измените #right на .right в CSS.

Я думаю, ваша проблема в том, что вы используете id вместо класса.Идентификатор должен быть уникальным, поэтому второй элемент div с id="right" является единственным с этим идентификатором.

Вы можете изменить свой код так, чтобы у вас было:

< div class="right" >2</div >

< div class="right" >3</div >

(вместо id="right")

И в css у вас будет:

.верно { 

float: right;       

width: 20px;

height: 20px,

}

(вместо #право)

<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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top