0

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

4

5 回答 5

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 所提到的，ID 不应该是数字。另外，您<div id"2">应该是<div id="2">（缺少'='符号）

于 2012-06-04T09:18:41.613 回答
0

请参阅此工作示例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;}
于 2012-06-04T09:22:57.393 回答
0

我稍微修改了你的代码并得到了结果。你能试试这个吗？

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

Hope this helps.

--Felix

于 2012-06-04T09:25:45.410 回答
0

Id must not start with a number. and maybe you can use the following style

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

I used a margin to the right to push away all the elements and a negetive margin to the left to pull up my desired elements.

于 2012-06-04T09:58:48.550 回答
0 
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>

I am not sure,

于 2012-06-05T06:09:17.240 回答