2011-01-16 16 views
0

私はウェブデザインに全く新しいです。私はちょうど下の図にあるものを達成しているようです。あなたがこのレイアウトはので、私は提案をgoogleの可能性と呼ばれているもの、それは素晴らしいことだ、事前にHTML/CSSでこれを行うにはどうすればいいですか?

おかげ alt text

+0

あなたは明らかにコピーしようとしているテンプレートを購入することができます... – nathanchere

+0

例を挙げることができますか?私は助けることができますが、私はyoourの質問を理解することはできません。 – Eray

答えて

5

さて、あなたは、コンテナのdivを開始することができます。次に、設定された幅で 'ボックス' divを追加します。それらのdivを左に浮動させると、コンテナ内にそのように配置されます。次に、ボックスの中にアイテムのフレームワークを追加することができます。

#container { 
    width:500px; 
    background-color:#CCC; 
} 
.box { 
    width:50%; 
    float:left; 
    min-height:120px; 
} 
.boximg { 
    // this is your icon for each box 
    width:20px; 
    float:left; 
    display:inline; 
} 
.boxtitle { 
    font-weight:bold; 
    float:left; 
    display:inline; 
} 

次に、あなたのHTML:

<div id="container"> 
    <div class="box"> 
     <div class="boximg"><img src=""/></div> 
     <span class="boxtitle">Here is your box title</span> 
     <p>Your box text here</p> 
    </div> 
    <!-- add more boxes here --> 
</div> 
+0

こんにちは、ありがとう、私は別のボックスを追加しようとするときを除いて、コードは完璧に動作します彼らはお互いの上に積み重ねます – Shane121

+0

どのようにあなたのために働いていないの詳細については?私はちょうど私のWebページに上記の正確なコードを貼り付け、それは私がそれを...あなたがいくつかのコードを表示する必要があると思ったように動作した? – mitch

関連する問題