DIV盒子不會對齊

我一直在閱讀文檔，教程和示例。但我似乎無法讓這4個盒子正確對齊，無論我做什麼。DIV盒子不會對齊

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主題很響應。

來源

2012-06-04 bradpotts

元ID必須以字母開頭，請與界定「正確對齊」，怎麼不當是它的權利嗎？ – Phil

只是調整了一下，它工作正常。 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>

正如菲爾提到的，IDS不應該是數字。此外，您<div id"2">應該已經<div id="2">（缺少「=」號）

來源

2012-06-04 09:18:41

謝謝我會注意不要使用數字作爲ID。 – bradpotts

看到這個工作示例http://jsfiddle.net/QFMXx/
更改ID在你的代碼。標識的不應以數字

<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;}

來源

2012-06-04 09:22:57 Valli69

我已經修改了你的代碼一點，得到的結果。你可以試試這個嗎？

<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>

希望這會有所幫助。

- 費爾瓦

來源

2012-06-04 09:25:45

編號不能以數字開頭。也許你可以使用下面的風格

<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>

我用保證金的權利，所有的元素和negetive緣推至左側，拉了我所需的元素。

來源

2012-06-04 09:58:48 maksbd19

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>

我不知道，

來源

2012-06-05 06:09:17 Prashobh

DIV盒子不會對齊

回答

相關問題