CSS float и HTML вопросы

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

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

html css css-float
person Joshxtothe4    schedule 17.11.2008    source источник
comment
вам, вероятно, не следует иметь два DIVS с правым идентификатором - идентификаторы должны быть уникальными.   -  person Jeff Atwood    schedule 17.11.2008
comment
согласен - измените 'id=left/right' на 'class=left/right' (аргументы о семантике в сторону) и измените свой css на .left и .right   -  person nickf    schedule 17.11.2008
comment
Могу я предложить разделить ваши вопросы? Людям будет легче давать конкретные ответы :)   -  person Sam Murray-Sutton    schedule 17.11.2008

Ответы (7)


arrow_upward
6
arrow_downward

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

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

В данном случае "второе место справа от окна" означает "первое, если смотреть слева" ;-)

person Falco Foxburr    schedule 17.11.2008
comment
+1 это правильно - другие ответы указывают на некоторые другие проблемы с образцом кода, но они не решают проблему. этот ответ объясняет, что происходит. - person nickf; 17.11.2008

arrow_upward
1
arrow_downward

Сначала я бы использовал класс, а не идентификатор для 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 ; */
}
person Toon Krijthe    schedule 17.11.2008

arrow_upward
0
arrow_downward

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

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

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

person Graeme Perrow    schedule 17.11.2008
comment
хотя это не изменит его положения. хотя это недопустимый HTML, браузер все равно правильно отобразит CSS - person nickf; 17.11.2008
comment
Возможно, но я предположил, что если вы делаете что-то незаконное, браузер волен интерпретировать это так, как он хочет, что может дать вам не то, что вы ожидаете, в зависимости от браузера. Я полагаю, что лучший способ начать — это иметь правильный HTML. - person Graeme Perrow; 17.11.2008
comment
в целом вы правы, но в данном случае это ничего не меняет. - person nickf; 17.11.2008

arrow_upward
0
arrow_downward

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

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

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

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

(вместо id="право")

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

.Правильно {

float: right;       

width: 20px;

height: 20px,

}

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

person Winston Smith    schedule 17.11.2008

arrow_upward
0
arrow_downward

вы можете использовать этот код

<div id="main">
        <div id="left">1</div>
        <div id="right">3</div>
        <div id="right">2</div>
    </div>
person Community    schedule 06.09.2019

arrow_upward
0
arrow_downward

Вы не можете использовать один и тот же идентификатор более одного раза.

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

Лучший способ сделать это с назначением класса.

person Kunal Raut    schedule 05.12.2019

arrow_upward

arrow_downward

person    schedule
comment
Ответ, хотя и действительный код, не объясняет, ПОЧЕМУ вы изменили то, что изменили. - person Andrew K.; 22.04.2015