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

コードを少し変更して結果を取得しました。これを試していただけませんか？

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

私はわかりません、

于 2012-06-05T06:09:17.240 に答える
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 に答える