ウェブページを分割する方法は？

Question

私は2000pxの長さのウェブページを持っていますが、私は4つの異なるセクション（すなわちそれぞれ500px）に分割したいので、異なるデザインで異なるコンテンツを追加することができます。しかし、私はそれをどうやって行うのか分かりません。私は彼らのハイパーリンクも提供したいと思います。

Answer 1

恐ろしい答えはフレームです。あなたがハイパーリンクを言うとき適度に悪い答えは、CSSのdiv

<div class="bottom"> 
    <div id="area1" style="float: left; width: 25%;"></div> 
    <div id="area2" style="float: left; width: 25%;"></div> 
    <div id="area3" style="float: left; width: 25%;"></div> 
    <div id="area4" style="float: left; width: 25%;"></div> 
</div> 

は今..あなたは、あなたのような意味ですかれるページのミニ一部をクリックすると、それはそれのその部分に展開しますか？あなたはおそらくそれ

$("#area1").click(function(){ 
$("#area1").css("width", "100%"); 
$("area2").css("width", "0%"); 
$("area3").css("width", "0%"); 
$("area4").css("width", "0%"); 
}); 

ためのいくつかのjqueryのハックを行う必要がありますので（上記の他人を縮小しながら、あなたは100にクリック四半期のクリックされたdiv要素のサイズを変更する必要があります。あなたは、CSSでの個々のdivのスタイルですidやクラスなどでそれのために。

Answer 2

あなたが簡単にカラムを作って、反応しやすい機能を提供するブートストラップを使用するための簡単な方法です。次のオプションを使用したくない場合は上記のようにCSSまたはframes.likeを使用できます答え

Answer 3

いくつかの基本が必要ですか？

ページの構造はHTMLですが、スタイル要素はCSSで決定されます。

<div> 
    <div></div> 
    <div></div>  
    <div></div> 
    <div></div> 
</div> 

divが自動的に全幅に拡大するブロックレベル要素と呼ばれるもの、である（すなわち：100ですから、このような含む<div></div>の内部に4つの論理部門（別名<div></div>）を、お勧めします％）。内側のdiv要素の幅を同じにしたいと思っています.4つの要素があるので、いくつかの計算を行います。

100％/ 4 =あなたが望む幅はそれぞれdivです。

<div> 
    <div style="width:25%;"></div> 
    <div style="width:25%;"></div>  
    <div style="width:25%;"></div> 
    <div style="width:25%;"></div> 
</div> 

div要素が希望の幅ことだけでお互いの上にスタックしますので、あなたは予想通り、これは動作しませんがわかります。それらを互いに隣り合わせにするには、display:inline-block;を使用してブロックレベルをブロックとインラインの間で変更します。

<div> 
    <div style="width:25%; display:inline-block;"></div> 
    <div style="width:25%; display:inline-block;"></div>  
    <div style="width:25%; display:inline-block;"></div> 
    <div style="width:25%; display:inline-block;"></div> 
</div> 

あなたが実際にHTMLコード（<div></div>間の改行）に保存されているホワイトスペースである、div要素間のいくつかのギャップに気づくでしょう除いてこれは、あなたが望むほとんど何になります。これを取り除く方法はいくつかあります。私の意見では、最も簡単にはこのように、要素間の空白のコメントを置くことです：

<div> 
    <div style="width:25%; display:inline-block;"></div><!-- 
    --><div style="width:25%; display:inline-block;"></div><!--  
    --><div style="width:25%; display:inline-block;"></div><!-- 
    --><div style="width:25%; display:inline-block;"></div> 
</div> 

これはHTML要素内のCSSスタイルを使用しているが、あなたは本当にCSS in a stylesheet and reference it in the pageを置く必要があります。