親スタイルをオーバーライドしてdivを並べるようにする

Question

似たような質問があることは知っていますが、それらの解決策は私にとっては効果がありません。私は親戚のスタイルをどのように克服するのかと思います。私のページは、多くのスタイルとクラスを持つマスターページに含まれています。

何らかの理由で私は次のCSSを適用しましたが、両方とも<div>が並んでいないため、全く機能しません。両方とも画面の全幅を占めています。したがって、2番目は最初の<div>の下です。

私はページ内のすべてのスタイルを忘れて、この作業をしたいと思っています。

.mysection { 
 
    margin: 0px; 
 
} 
 

 
.mysection > div#first { 
 
    margin: 0px; 
 
    float: left !important; 
 
    display: inline-block !important; 
 
    width: 350px !important; 
 
} 
 

 
.mysection > div#second { 
 
    margin-left: 15%; 
 
    display: inline-block !important; 
 
    width: 350px !important; 
 
}

<section class="mysection"> 
 
    <div class="first"> 
 
    <h1>My Title</h1> 
 
    <asp:Panel ID="myPanel" runat="server"> 
 
     <div>Test1</div> 
 
    </asp:Panel> 
 
    </div> 
 
    <div class="second"> 
 
    <h1>My Title 2</h2> 
 
    <div>Test2</div> 
 
    </div> 
 
</section>

Answer 1

変更この：.mysection > div#first.mysection > .firstへ

は、ここに私のコードです。 .secondと同じです。

#firstは、id="first"の要素を指し、.firstは、class="first"の要素を指す。子セレクタのあとの先頭にあるdivも不要です。

<h1>タグのいずれかを</h2>と偶然にも閉じました。なお、以下に固定されます：

.mysection { 
 
    margin: 0px; 
 
} 
 

 
.mysection > .first { 
 
    margin: 0px; 
 
    float: left; 
 
    display: inline-block; 
 
    width: 350px; 
 
} 
 

 
.mysection > .second { 
 
    margin-left: 15%; 
 
    display: inline-block; 
 
    width: 350px; 
 
}

<section class="mysection"> 
 
    <div class="first"> 
 
    <h1>My Title</h1> 
 
    <asp:Panel ID="myPanel" runat="server"> 
 
     <div>Test1</div> 
 
    </asp:Panel> 
 
    </div> 
 
    <div class="second"> 
 
    <h1>My Title 2</h1> 
 
    <div>Test2</div> 
 
    </div> 
 
</section>

Answer 2

は、あなたの答えをclass

.mysection div.first{ 
     margin: 0px; 
     float: left !important; 
     display: inline-block !important; 
     width: 350px !important; 
    } 

    .mysection div.second{ 
     margin-left: 15%; 
     display: inline-block !important; 
     width: 350px !important; 
    }