将div对齐到右侧[重复]答案

【问题标题】：Align div to the right side [duplicate]将div对齐到右侧[重复]
【发布时间】：2018-07-29 19:31:17
【问题描述】：

您好，我有以下 HTML，在容器内我有 Header、section 和 div。使用类 rightSideDiv 的 div 下面的当前 CSS 不会显示在 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 但两者似乎都不起作用。

【问题讨论】：

另见stackoverflow.com/questions/3619233/…
宽度上的拼写错误 - 更正后，线条的宽度会将绿色框向下推
还有stackoverflow.com/questions/2716955/…

标签： html css

【解决方案1】：

尝试改用 flexbox 和 display:flex。只需对 css 进行少量更改，您就可以获得如下内容：https://jsfiddle.net/vnuz47va/2/

.container {
  height: 500px;
  width: 520px;
  background-color: red;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

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

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

【讨论】：

请不要让人们去其他网站寻求答案。代码应该在这个网站上。见How to Answer。
您需要注意 witdh 中的拼写错误 - 修复后使其宽度超过 500 像素

【解决方案2】：

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

【讨论】：

您仍然拼写宽度错误 - 更正后父容器会太窄
@mplungjan OP 拼写宽度错误。感谢您指出这一点。固定
我知道他做到了。但是你的 sn-p 编辑器指出了它，你的修复让它再次失败:) 你需要 510px 左右
其实你需要一个sectionClass的宽度
适用于 2x49% 或无边框 :)

【解决方案3】：

用这个改变你的CSS：

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

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

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

}

.rightSideDiv {
    float : right;
    width:50%;
    height:200px;
    border: 4px solid green;

}

您可以使用左右浮动来对齐您的 div，但是您的容器的宽度为 400，而您的 2 div 为 249+249 = 498，所以这里有问题..

【讨论】：

【解决方案4】：

把H2改成display: block;，然后加上float:left；到两个盒子。

当您希望 div 通过浮动并排放置时，将它们浮动到相同的方向。

rightSideDiv 比另一个高 8 像素。那是因为 4px 边框添加在高度之上。考虑使用box-sizing: border-box;，这会使边框被吸收到设定的高度，而不是被添加到它上面。

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

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

.sectionClass {
  width:249px;
  height:200px;
  background-color: yellow;
  display: inline-block;
  float: left;

}

.rightSideDiv {
    width:249px;
  height:200px;
  border: 4px solid green;
  display: inline-block;
  float: left;
}

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

【讨论】：