覆蓋父母造型並排div div

我知道有類似的問題，但這些解決方案並不適合我。我想知道如何改寫父母的風格。我的頁面包含在一個母版頁中，它有許多樣式和類。覆蓋父母造型並排div div

出於某種原因，我申請了下面的CSS，但它不工作，因爲兩個<div>不是並排的。兩者都佔據了整個屏幕的寬度。所以第二個是低於第一個<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>

來源

2016-04-30 Maximus Decimus

更改此：.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>

來源

2016-04-30 04:50:47 timolawl

謝謝您的回答。我明白了。現在，這兩個DIV並排（優秀），但是現在低於它在部分上安裝的部分之下的所有內容。這就像「我的部分」有一個短的高度。我該怎麼做，以阻止和避免安裝。我在「mysection」中添加了樣式「display：block;」但我沒有得到任何東西 –

@MaximusDecimus，像'

'一樣在第二個div之後添加空格div，樣式清晰，並且您的問題將得到解決。 –

OH。這就是你的意思。是的，浮動必須被清除，或者我相信'overflow：hidden;'也可以。這是因爲'浮動'造成高度爲'0'IIRC。 – timolawl

您使用的CSS ID & HTML用途class更改爲id到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; 
    }

來源

2016-04-30 04:59:08

覆蓋父母造型並排div div

回答

相關問題