将div对齐到右侧 [英] Align div to the right side

问题描述

你好，我有下面的HTML，容器内部我有标题，部分和div。
使用我当前的CSS下面带有类rightSideDiv的div不会显示在section元素的右边。

  .container {height：500px; widht：500px; background-color：red;}。headerTitle {display：inline-block;身高：24px; margin：24px 24px 0;填充：0; line-height：24px;}。sectionClass {width：249px;高度：200像素; background-color：yellow;}。rightSideDiv {width：249px;高度：200像素; border：4px solid green;}  

 < aside> < div class =container> < header class =headerTitle>标题标题< / header> < section class =sectionClass> 。 < /节> < div class =rightSideDiv> < / DIV> < / DIV> < / aside>  

旁边。我不想修改当前的HTML结构。我已经尝试指定float：left或right，但两者似乎都不起作用。 应用 float：left; 到两个容器，使用 width：50％; 而不是px和 display：block; header

  .container {height：500px;宽度：500px; background-color：red;}。headerTitle {display：block;身高：24px; margin：24px 24px 0;填充：0; line-height：24px;}。sectionClass {width：50％;高度：200像素;背景颜色：黄色; float：left;}。rightSideDiv {width：50％;高度：200像素; background-color：pink; float：left;}  

 < aside> < div class =container> < header class =headerTitle>标题标题< / header> < section class =sectionClass> 。 < /节> < div class =rightSideDiv> < / DIV> < / DIV> < / aside>  

Hi I have the below HTML, Inside the Container I have Header, section and div. With my current CSS below the div with class rightSideDiv does not show to right to the section element.

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

The section and div should be shown side by side. I dont want to modify the current HTML structure. I have tried specifying float:left or right but both doesn't seem to work.

解决方案

Apply float: left; to both containers, use width: 50%; instead of px and display: block; header

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

这篇关于将div对齐到右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！