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盒子不会对齐

回答

相关问题