Question

div元素＆＃34;右侧容器＆＃34;应该漂浮在＆＃34;中央容器旁边＃34; 但是没有发生......原因是什么？

＆＃13;

.centralcontainer {
  width: 78%;
  display: block;
  float: left;
  border: 3px solid black;
  height: 100px;
}

.rightsidecontainer {
  width: 200px;
  border: 2px solid grey;
  height: 100px;
}

＆＃13;

<div class="centralcontainer"></div>
<div class="rightsidecontainer"></div>

＆＃13;

Answer 1

看起来你需要将float：left添加到.rightsidecontainer。

＆＃13;

.centralcontainer {
  width: 78%;
  display: block;
  float: left;
  border: 3px solid black;
  height: 100px;
}

.rightsidecontainer {
  width: 200px;
  border: 2px solid grey;
  height: 100px;
  float:left;
}

＆＃13;

<div class="centralcontainer"></div>
<div class="rightsidecontainer"></div>

＆＃13;

Answer 2

您也可以使用inline-block而不是添加float属性：

.centralcontainer {
  display: inline-block;
  width: 78%;
  border: 3px solid black;
  height: 100px;
}

.rightsidecontainer {
  display: inline-block;
  width: 200px;
  border: 2px solid grey;
  height: 100px;
}

div容器不会浮动到另一个容器旁边

2 个答案: