CSS float и HTML вопросы - PullRequest
Новая
       10

CSS float и HTML вопросы

2 голосов
/ 17 ноября 2008

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

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

Ответы [ 5 ]

6 голосов
/ 17 ноября 2008

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

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

В этом случае «второе место с правой стороны окна» означает «сначала, если смотреть слева»; -)

1 голос
/ 17 ноября 2008

Сначала я бы использовал 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 ; */
}
0 голосов
/ 22 апреля 2015 
<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>
0 голосов
/ 17 ноября 2008

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

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

2

3

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

А в css вы бы получили:

.right {

float: right;       

width: 20px;

height: 20px,

}

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

0 голосов
/ 17 ноября 2008

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

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

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

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

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

...