Question

我知道有类似的问题，但这些解决方案对我不起作用。我想知道如何改变父母的风格。我的页面包含在一个母版页中，该页面有许多样式和类。

出于某种原因，我应用了以下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>

Answer 1

将此更改为.mysection > div#first至.mysection > .first。与.second相同。

#first表示带有id="first"的元素，而.first表示带有class="first"的元素。在子选择器之后的前置div也是不必要的。

在事故发生时，您还使用<h1>关闭了其中一个</h2>代码。它定在下面：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你用css ID＆amp; 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;
    }

覆盖父样式以使div并排

2 个答案: