ブラウザでレンダリングされた最初の子に基づいて、親の設定マージンの下にある最初の子のコンセプト

Question

<div class="parent"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 

上記は私がcodepen hereでエミュレートしたサンプルコードです。

子要素1及び2は、左右およびその逆のいずれかで浮上させることができます。つまり、一方を右に浮動させると、他方を浮動させることができ、その逆も可能です。

今私の質問は

→最初の子は、それがHTMLで書かれた順番に基づいていますか？それが真であれば、浮動小数点数を左に浮動させたときにブラウザで最初にレンダリングされるかどうかにかかわらず、常に最初の子が残るか、または最初またはN番目の子がHTMLで書かれた順序に基づいていないしかし、それはブラウザでレンダリングされた順番になります。

は、なぜ私はそのような質問をしています。 2つのテンプレート間の唯一の違いは、一つにサイドバーは、イオンが残されていることであり、他にサイドバーが右側にあるとき

は、特にワードプレスで瞬間があります。 LESS IS MORE HTML全体は同じですが、違いは2列のオーダーであるため、別々のテンプレートを作成する理由はありません。

私は、最初にブラウザに表示される列にmargin-rightを設定できると、最初の子プロパティを使用できると考えていました。

これは、私たちが最初にして、青、その後margin-rightは私が何をしたい.two

に適用する必要があります表示された緑色のある順序を逆があればmargin-rightは.oneに適用すべき場合→その後、 https://codepen.io/codeispoetry/pen/xdymZJ

ある場合これはjavascriptやphpではなく、CSSが何らかの形でfirst childプロパティを利用している可能性があります。

Answer 1

これは、要素がマークアップ内に表示されるところで完全に行われます。 https://codepen.io/anon/pen/YVJdBX：

はあなたの最初の例のこの更新バージョンを参照してください。 「first-child」として識別された要素には赤い境界線があります。

HTML：

<div class="parent"> 
    <div class="one child"></div> 
    <div class="two child"></div> 
</div> 

CSS：私はあなたが作業することができます示唆しているものとは思わない

.parent { 
    height: 900px; 
    background-color: #FFFFFF; 
} 
.one { 
    background-color: blue; 
    height: 900px; 
    float: right; 
    width: 33%; 
    margin-right: 30px; 
} 
.two { 
    background-color: green; 
    width:60%; 
    height: 900px; 
    float: left; 
} 

.child:first-child 
{ 
    border:solid 1px red; 
} 

。あなたが望んでいる効果的に何をしている、複数のルールを適用するために、物事がレンダリングされる場所に反応しないCSS は、画面上のものをレンダリングする方法/ブラウザ伝え、それをすることができます。