Question

我一直在阅读文档，教程和示例。但无论我做什么，我似乎都无法正确对齐这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主题是响应式的。

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

正如Phil所说，Ids不应该是数字。此外，您的<div id"2">应该是<div id="2">（缺少'='符号）

Answer 2

请参阅此工作示例http://jsfiddle.net/QFMXx/
在代码中更改Id。 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;}

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

希望这有帮助。

- 菲利克斯

Answer 4

我不能以数字开头。也许你可以使用以下风格

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

我在右侧使用了一个边距来推开所有元素，并在左边使用一个边缘来拉出我想要的元素。

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

我不确定，

DIV盒子不会对齐

5 个答案: