Question

我在调整我的div并排时遇到了问题...

以下是图片的外观：

这是主要结构的代码：

120px

＆＃34; ImageDiv＆＃34;是picutre所在的位置。它占用#ImageDiv { height: 100%; width: 120px; float: left; background-color: white; } #ContentDiv { height: 60%; background-color: green; } #SkillDiv { height: 40%; background-color: blue; }。＆＃34; ContentDiv＆＃34;是文本在里面的地方和＆＃34; SkillDiv＆＃34;是其他3个黑匣子在里面。

这是我的CSS：

myObj.isEnabled=false

显示：

问题是当我尝试添加您在图像中可以看到的那些黑盒子时。以下是它的外观：

如果我删除白色背景颜色，您可以看到Div不正确地对齐。他们有点像互相奔跑。

Answer 1

将右侧的东西放入自己的div容器中，然后将其浮动到右侧。

如果我理解你，那应该是它：

HTML

<div id="AttackDiv">
    <div id="ImageDiv">left
    </div>
    <div id="RightSide">
      <div id="ContentDiv">right1
      </div>
      <div id="SkillDiv">right2
      </div>
    </div>
</div>

CSS

#ImageDiv {
    height: 100%;
    width: 120px;
    float: left;    
    background-color: white;
}

#ContentDiv {
    height: 60%;
    background-color: green;
}

#SkillDiv {
    height: 40%;
    background-color: blue;

}

#RightSide {
  float: right;
  width: 200px;
 }

您可以在此处查看：https://jsfiddle.net/mxcqyjos/4/

Answer 2

默认情况下，Div是块元素，在正常流程中，它们占据容器的100％宽度。因此，div元素自然会垂直堆叠形成一列。

要使它们并排排列，请考虑以下选项：

将float: left应用于您想要连续显示的所有div
将div定义为display: inline-block

或者，对于一个非常简单有效的解决方案，只需使用flexbox：

Aligning Three Divs Horizontally Using Flexbox

此外，使用浮动时，熟悉 clearfix 方法会很有帮助：

CSS div并没有分开

2 个答案: