Question

您好我有以下HTML，在容器内我有Header，section和div。使用我当前的CSS下面的div，类rightSideDiv没有向右显示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>

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试使用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>

Answer 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所以这里有一个问题..

Answer 4

将H2更改为display: block;，然后添加float:left;两个盒子。

如果你希望divs并排浮动，那么浮动它们的方向相同。

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>

将div与右侧对齐

4 个答案: