DIV кутията няма да се изравни - css, html, css-float

Проведох документация, уроци и примери, но не мога да получа тези 4 кутии да се приведат правилно, без значение какво правя.

div#frontpage{width:100%; }
div#1{width:25%; float:left; position:relative;}
div#2{width:25%; float:left; position:relative;}
div#3{width:25%; float:right; position:relative;}
div#4{width:25%; float:right; position:relative;}
.clear{clear:both;}

<div id="frontpage">
<div id="1">
</div>
<div id"2">
</div>
<div id="3">
</div>
<div id="4">
</div>
<div class="clear">
</div>
</div>

Това е, което дойдох досега и най-близкотоРезултат, който искам да постигна. Накарайте ги да се подравняват хоризонтално направо в един ред. Причината, поради която използвам% вместо px е, че моята wordpress тема е отзивчива.

Отговори:

1 за отговор № 1

Просто го изглади малко и работи добре. CSS

div#frontpage{width:100%; }
div.box{width:25%; float:left; position:relative;}
.clear{clear:both;}​

HTML

<div id="frontpage">
<div class="box">
a
</div>
<div class="box">
s
</div>
<div class="box">
d
</div>
<div class="box">
f
</div>
<div class="clear">
</div>
</div>​​​​​​​​​​​​​

Както спомена Фил, ID не трябва да са числа. Също така, вашият <div id"2"> трябваше да бъде <div id="2"> (липсва "=" знак)

---

0 за отговор № 2

виж този работен пример http://jsfiddle.net/QFMXx/
Променете идентификационните номера в своя код. Идент. № не трябва да започва с цифри

<div id="frontpage">
<div id="d1">sfdfs
</div>
<div id="d2">dfsdf
</div>
<div id="d3">dsfsdf
</div>
<div id="d4">dfsfsd
</div>
<div class="clear">sdfsd
</div>
</div>

и css:

div#frontpage{width:100%; }
div#d1{width:25%; float:left; position:relative;}
div#d2{width:25%; float:left; position:relative;}
div#d3{width:25%; float:right; position:relative;}
div#d4{width:25%; float:right; position:relative;}
.clear{clear:both;}

---

0 за отговор № 3

Промених кода малко и получих резултата. Бихте ли опитали това?

<style>div#frontpage{width:100%; height:50%;border:1px solid red }
div.s1{width:25%; height:50%;float:left; position:relative;border:1px solid blue;clear:both}
.clear{clear:both;}
</style>
<div id="frontpage">
<div class="s1">
</div>
<div class="s1">
</div>
<div class="s1">
</div>
<div class="s1">
</div>
<div class="clear">
</div>
</div>
</div>

Надявам се това да помогне.

--Felix

---

0 за отговор № 4

Id не трябва да започва с номер. и може би можете да използвате следния стил

    <style>
div#frontpage{width:100%;background-color:#ccc; }
div#a1{width:25%; float:left; position:relative;background-color:red;margin-right:75%;}
div#a2{width:25%; float:left; position:relative;background-color:#ffccea;margin:0 50% 0 -75%}
div#a3{width:25%; float:right; position:relative;background-color:blue;margin:0 25% 0 -50%}
div#a4{width:25%; float:right; position:relative;background-color:yellow;margin:0 0 0 -25%}
.clear{clear:both;}
</style>

Използвах маржа вдясно, за да изтласкам всички елементи и смайващ марж вляво, за да извадя желаните от мен елементи.

---

0 за отговор № 5

div#frontpage{width:100%;  position:relative;}
div#a{width:25%; float:left; }
div#b{width:25%; float:left; }
div#c{width:25%; float:right;}
div#d{width:25%; float:right;}
.clear{clear:both;}

<div id="frontpage">
<div id="a"></div>
<div id"b"></div>
<div id="c"></div>
<div id="d"></div>
<div class="clear"></div>
</div>

Не съм сигурен,

---