2

私が達成しようとしているのは、CSS のポジショニングです。Codecademy.com で HTML/CSS について多くのことを学びましたが、Joomla のテンプレートについては少し混乱しています。

私が模倣しようとしているのは、このページに見られるような 3 つの div の行です: http://www.theremixologists.com/props - 行ごとに 3 つのコンテンツ インライン ブロックを指定する方法がわかりません。名前があります (アリシア & マット、リチャード & ジェニファー、キルステン & ジョン) - 3 横 | 5 ダウン

ここに私が複製しようとしているもののモックアップがあります:

http://i.imgur.com/qzPQO.jpg

横に 3 つの div があり、その下に新しい div の行があります。

これまでのところ、私がやるべきことは次のとおりだと思います。

WYSIWYG エディターを介して特定の Joomla ページに貼り付けられた HTML サンプル コード (このコードを一般的な Joomla 作成ページに追加します):

<div class="box_row1">  
<p>This is sample text for the first content box</p>  
</div>  
<div class="box">  
<p>This is sample text for the second content box</p>  
</div>  
<div class="box">  
<p>This is sample text for the third content box</p>  
</div>

次に、CSS を custom.css (テンプレート用) に貼り付けます。

.box_row1 {  
 display: inline-block;  
 height: 100px;  
 width: 100px;  
 border-radius: 6px;  
 margin: 10px 10px 10px 10px;  
 }

次に、2 番目と 3 番目の行のクラスを作成します (ただし、行を作成するにはどうすればよいですか)。

3 div の新しい行を開始する方法がわかりません。CSS の配置は、それ自体が科学です。これらの 3x15 のブロックは、実際にはテーブルですか、それともグリッド モジュールですか? どんな助けでも大歓迎です！ありがとうございました

編集: Firebug でページを調べると、ブロックごとに次のスニピットが表示されます。

.fullwidth .one_third{幅:256px;}

divの行を作成する方法がわかりません。CSSの配置は私にとって混乱を招きますLOL。ため息。

4

2 に答える 2

2

ここで何をしたいのかわかりません.3つのdivをすべて作成したいと思います.1を作成してinlineいるだけですinline.これはpositioning問題ではありません.display

.div_common {  
 display: inline-block;  
 height: 100px;  
 width: 100px;  
 border-radius: 6px;  
 margin: 10px 10px 10px 10px;  
}  

<div class="div_common">  
 <p>This is sample text for the first content box</p>  
</div>  
<div class="div_common">  
 <p>This is sample text for the second content box</p>  
</div>  
<div class="div_common">  
 <p>This is sample text for the third content box</p>  
</div>
于 2012-11-26T20:37:18.977 に答える
0

これが彼らがしていることです

<div class="big_box">
    <div class="box">  
        <p>This is sample text for the first content box</p>  
    </div>  
    <div class="box">  
        <p>This is sample text for the second content box</p>  
    </div>  
    <div class="box">  
        <p>This is sample text for the third content box</p>  
    </div>
</div>
<div class="clear"></div>

今CSS

.clear {
    clear:both;
}
.big_box {
    width:600px;
}
.big_box .box {
    float:left;
    width:196px;
}
于 2012-11-26T20:38:26.920 に答える