覆盖父母造型并排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

回答

相关问题