Эй, я просто пытался поставить два divs друг на друга, как я делал сотни раз, используя "float: left", но это просто не происходит. Второй div просто сидит ниже первого.
Здесь код:
<div id=wrapper" style="overflow: hidden; width: 1000;">
<div id="box1" class="greybox">
Right
</div>
<div id="box2" class="greybox">
Left
</div>
</div>
и css:
#box1 {
margin-top: 70;
margin-left: 85;
width: 440px;
height: 450px;
padding-left: 40px;
padding-top: 1px;
padding-right: 20px
float: left;
overflow: hidden;
}
#box2 {
margin-top: 70;
margin-left: 30;
width: 20px;
height: 300px;
padding-left: 0px;
padding-top: 1px;
overflow: hidden;
float: left;
}
Любая помощь приветствуется.
У вас отсутствует двойная кавычка вокруг вашего идентификатора "обертки".
Я обнаружил это, пытаясь сделать скрипку из вашего кода, в котором была отмечена ошибка. (Подсказка: сделайте скрипку для нас в следующий раз)
У вас также были некоторые ошибки в CSS, и ваши ширины были странными.
Исправлена:
<div id="wrapper" style="overflow: hidden; width: 1000;">
<div id="box2" class="greybox">Left</div>
<div id="box1" class="greybox">Right</div>
</div>
#box1 {
margin-top: 70;
margin-left: 85;
width: 200px;
height: 450px;
padding-left: 40px;
padding-top: 1px;
padding-right: 20px;
float: left;
overflow: hidden;
}
#box2 {
margin-top: 70;
margin-left: 30;
width: 40px;
height: 300px;
padding-left: 0px;
padding-top: 1px;
overflow: hidden;
float: left;
}
Вы можете либо поместить оба поля слева, чтобы они были бок о бок, либо поплавать вправо.
Обычно это проблема, когда ширина второго элемента не будет располагаться горизонтально внутри родителя. Класс greybox добавляет какие-либо дополнения?
Кроме того, в вашей паре идентификатор обертки отсутствует. Это дало бы родительской без ширины, если бы это было стилизовано с помощью таблицы стилей, а не встроенной и приводило к проблеме, которую я описываю.
Кроме того, стили box1 имеют синтаксическую ошибку при заполнении. Все стили ниже не вступили в силу. Это должно быть ваше исправление.
Вы должны очистить этот помощник кода. Множество ошибок, отсутствующих (px), точек с запятой, котировок и т.д....
<div id="wrapper" style="overflow: hidden; width: 1000;">
<div id="box1" class="greybox">Left</div>
<div id="box2" class="greybox">Right</div>
</div>
#box1 {
width: 440px;
height: 450px;
padding: 1px 20px 0 40px; /* Order = Top, Right, Bottom, Left */
margin: 70px 0 0 85px; /* Cleans up your code by eliminating margin-top, margin-right, margin-bottom, margin-left and same applies with padding */
float: left;
overflow: hidden;
}
#box2 {
width: 20px;
height: 300px;
padding: 1px 0 0 0;
margin: 70px 0 0 30px;
overflow: hidden;
float: left;
}
почему у переполнения: скрыто до # box1 и # box2? вы знаете, как использовать {overflow: hidden;}
u уже поставил переполнение: скрыто в основной обертке
видеть это
<div id="wrapper" style="overflow: hidden; width: 1000px;">
<div id="box1" class="greybox">
left
</div>
<div id="box2" class="greybox">
Right
</div>
</div>
и css
#box1 {
margin-top: 70px;
margin-left: 85px;
width: 440px;
height: 450px;
padding-left: 40px;
padding-top: 1px;
padding-right: 20px;
float: left;
background:orange;
}
#box2 {
margin-top: 70px;
margin-left: 30px;
width: 20px;
height: 300px;
padding-left: 0px;
padding-top: 1px;
background:green;
float: left;
}
см. jsfiddle
У вас много опечаток в вашем коде. Отсутствуют двойные кавычки и точки с запятой. Кроме того, вы забыли много раз, чтобы дать вашим значениям также единицу (например, px
).
Если вы исправите все эти ошибки, все будет работать так, как ожидалось - см. JsFiddle
Почему что-то произойдет? элемент auto float остается.
Может быть, вы имеете в виду
float: right;
попробуй это ^^