将 div 右对齐

Question

您好，我有以下 HTML，在容器内我有标题、部分和 div。在我当前的 CSS 下，具有类 rightSideDiv 的 div 不会显示在 section 元素的右侧。

 .container {
  height: 500px;
  widht: 500px;
  background-color: red;
}

.headerTitle {
  display: inline-block;
		height: 24px;
		margin: 24px 24px 0;
		padding: 0;
		line-height: 24px;
}

.sectionClass {
  width:249px;
  height:200px;
    background-color: yellow;

}

.rightSideDiv {
    width:249px;
  height:200px;
  border: 4px solid green;

}

 <aside>
  <div class="container">
    <header class="headerTitle"> Header Title  </header>
    <section class="sectionClass"> .  </section>
    <div class="rightSideDiv"> </div>
  </div>
  </aside>

section 和 div 应该并排显示。我不想修改当前的 HTML 结构。我试过指定 float:left 或 right，但两者似乎都不起作用。

原文由 user804401 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将 float: left; 应用于两个容器，使用 width: 50%; 代替px和 display: block; 标头

 .container {
  height: 500px;
  width: 500px;
  background-color: red;
}

.headerTitle {
  display: block;
  height: 24px;
  margin: 24px 24px 0;
  padding: 0;
  line-height: 24px;
}

.sectionClass {
  width:50%;
  height:200px;
  background-color: yellow;
  float: left;

}

.rightSideDiv {
  width:50%;
  height:200px;
  background-color: pink;
  float: left;

}

 <aside>
  <div class="container">
    <header class="headerTitle"> Header Title  </header>
    <section class="sectionClass"> .  </section>
    <div class="rightSideDiv"> </div>
  </div>
  </aside>

原文由 Dean Coakley 发布，翻译遵循 CC BY-SA 3.0 许可协议