別のポジションで同じdivですか？ （CSS）

Question

異なる位置のCSS divを使用することはできますか？たとえば、頻繁に使用するdivスタイルがあります。別の位置を望むたびに別のidを作成するのは過度のようです。 HTML内でdivの位置を指定することは可能ですか？

ありがとうございます。

Answer 1

あなたは、コード内でスタイルをインラインで指定することができます。

<div style="left:10px;top:20px;"> 

は、私は一般的にかかわらず、これを回避しよう。すべてのスタイルが1か所にある場合は、コードを維持する方が簡単です。

Answer 2

私はあなたの質問を正しく理解しているとは確信していませんが、複数のクラスを要素に割り当てることができ、cssインラインを指定できます。これらの手法を組み合わせることで、位置を非常に便利に変えることができます。

Answer 3

私が正しくあなたの問題を理解していれば、あなたの代わりにIDのクラスを使用することができます。

<div class="something">...</div> 

.something { whatever: whatever } 

Answer 4

あなたは、同じIDを持つ複数の要素を持つことはできません。代わりに、IDによって位置を定義するのは、特定の要素に固有のプロパティだけのために共通のプロパティのためのクラスとIDを使用して：あなたはDIVに複数のクラスを渡すことができ

.positionDiv { 
    width: 400px; 
    height: 200px; 
} 
#div1 { 
    left: 20px; 
} 
#dev2 { 
    left: 40px; 
} 

<div class='positionDiv' id='div1'>first div</div> 
<div class='positionDiv' id='div2'>second div</div> 

Answer 5

。すべての既定のプロパティを持つクラスを1つ作成します。次に、必要な場所にDIVを配置するいくつかの追加のクラスを作成します。

.defaults 
{ 
    properties... 
} 
.position1 
{ 
    top: 0; 
    left: 100px; 
} 
.position2 
{ 
    top 100px; 
    left: 0; 
} 

<div class="defaults position1"></div> 
<div class="defaults position2"></div> 

Answer 6

可能であれば、インラインスタイリングを使用しないでください。 読みやすさとメンテナンスのために、スタイリングからHTMLを分離したい場合

代わりに余分なクラスをdivに追加します。

HTML

<div class="styled"> 
</div> 
<div class="styled otherclass"> 
</div> 

CSS

.styled { background: red; border: 1px solid blue; } 
.otherclass { background: green } 

二行目は背景のみを却下。だから国境はスタイルクラスから継承されます