Javascript 内联div没有排成一行

我的理解是，只需将

display:inline

添加到具有相对位置的div中，就会将它们对齐（从左到右），有点像

float:left

。两种方法我都试过，但都不管用

下面是我最后一次尝试使用内联显示的示例。我希望所有三段从左到右对齐，但它们的显示方式就像未设置样式的div一样

函数showProfile（）{
var profile=document.getElementById（'userprofile'）；
profile.style.opacity=0.8；
var profileImage=document.getElementById（'userimage'）；
profileImage.style.opacity=0.8；
}

.profile{
顶部：68px；
背景色：#424755；
颜色：#dddddd；
宽度：100%；
最小高度：50px；
不透明度：0；
位置：固定；
字体：16px“塔荷马”；
}
.miniProfileImage{
不透明度：0；
宽度：100px；
高度：100px；
}
.微型生物片段{
显示：内联；
右边距：5px；
宽度：33%；
}

这是您单击的此人的基本信息。
这是您单击的人的标记行。
视图配置文件

CSS应以ID为目标，并使用浮动：左。参见示例

.profile{
顶部：68px；
背景色：#424755；
颜色：#dddddd；
宽度：100%；
最小高度：50px；
位置：固定；
字体：16px“塔荷马”；
}
.miniProfileImage{
浮动：左；
最大宽度：33%；
高度：100px；
}
#迷你生物{
浮动：左；
右边距：5px；
宽度：33%；
}
#小报价{
浮动：左；
右边距：5px；
宽度：33%；
}

这是您单击的此人的基本信息。
这是您单击的人的标记行。

CSS应以ID为目标，并使用

float:left

。参见示例

.profile{
顶部：68px；
背景色：#424755；
颜色：#dddddd；
宽度：100%；
最小高度：50px；
位置：固定；
字体：16px“塔荷马”；
}
.miniProfileImage{
浮动：左；
最大宽度：33%；
高度：100px；
}
#迷你生物{
浮动：左；
右边距：5px；
宽度：33%；
}
#小报价{
浮动：左；
右边距：5px；
宽度：33%；
}

这是您单击的此人的基本信息。
这是您单击的人的标记行。

我在问自己，为什么你有

职位：绝对

为了让它工作，我刚刚添加了
display:flex；证明内容：之间的空间
到
.profile
类

删除该位置，然后尝试添加最后两行

看这里的例子：
我在问自己，为什么你有
位置：绝对

为了让它工作，我刚刚添加了
display:flex；证明内容：之间的空间
到
.profile
类

删除该位置，然后尝试添加最后两行

请参见此处的示例：
您应该使用内联块，而不是内联块，以获得更多控制。我使用了33%-2px的宽度，因为浏览器将div的大小向上舍入，从而导致溢出。你5倍的利润率也不能帮助你得到这笔钱


函数showProfile（）{
var profile=document.getElementById（'userprofile'）；
profile.style.opacity=0.8；
var profileImage=document.getElementById（'userimage'）；
profileImage.style.opacity=0.8；
}
.profile{
顶部：68px；
背景色：#424755；
颜色：#dddddd；
宽度：100%；
最小高度：50px；
不透明度：0；
位置：固定；
字体：16px“塔荷马”；
}
.miniProfileImage{
不透明度：0；
宽度：100px；
高度：100px；
显示：内联块；
}
.微型生物片段{
显示：内联块；
宽度：钙（33%-2px）；
垂直对齐：中间对齐；
}

这是您单击的此人的基本信息。
这是您单击的人的标记行。
查看配置文件
您应该使用内联块而不是内联块以获得更多控制。我使用了33%-2px的宽度，因为浏览器将div的大小向上舍入，从而导致溢出。你5倍的利润率也不能帮助你得到这笔钱


函数showProfile（）{
var profile=document.getElementById（'userprofile'）；
profile.style.opacity=0.8；
var profileImage=document.getElementById（'userimage'）；
profileImage.style.opacity=0.8；
}
.profile{
顶部：68px；
背景色：#424755；
颜色：#dddddd；
宽度：100%；
最小高度：50px；
不透明度：0；
位置：固定；
字体：16px“塔荷马”；
}
.miniProfileImage{
不透明度：0；
宽度：100px；
高度：100px；
显示：内联块；
}
.微型生物片段{
显示：内联块；
宽度：钙（33%-2px）；
垂直对齐：中间对齐；
}

这是您单击的此人的基本信息。
这是您单击的人的标记行。
查看配置文件，将divs设置为显示：内联如果div的总长度不超过容器的宽度，它们将仅水平排列

和
宽度
，忽略内联元素的
高度
，应使用
显示：内联块取而代之。包装行为与上述相同

此外，浏览器还呈现内联*元素之间的空白，约为4px，有关详细信息，请参阅

在您的示例中，有3个div，如果希望它们的宽度相等，可以执行以下操作：

.profile {
  font-size: 0; /*remove whitespace*/
  background: silver;
}
.miniBioSegment {
  font-size: 16px; /*reset font-size*/
  display: inline-block;
  vertical-align: top; /*vertical alignment*/
  width: 33.3333%;
}

但是，第一个div中的image对象被设置为100px，我认为您更希望该div也具有相同的宽度，并且对于其他两个div，每个div占用50%的剩余空间。示例：

1.
.profile {
  font-size: 0;
  background: silver;
}
.miniBioSegment {
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  border: 1px dotted red;
  box-sizing: border-box;
  width: 100px;
}
#miniBio, #miniQuote {
  width: calc((100% - 100px) / 2);
}
.miniProfileImage {
  width: 100px;
  height: 100px;
  display: block;
}

.profile {
  background: silver;
}
.profile:after {
  content: "";
  display: table;
  clear: both;
}
.miniBioSegment {
  float: left;
  border: 1px dotted red;
  box-sizing: border-box;
  width: 100px;
}
#miniBio, #miniQuote {
  width: calc((100% - 100px) / 2);
}
.miniProfileImage {
  width: 100px;
  height: 100px;
  display: block;
}

.profile {
  background: silver;
  display: table;
  border-collapse: collapse;
  width: 100%;
}
.miniBioSegment {
  display: table-cell;
  vertical-align: top;
  border: 1px dotted red;
}
#miniBio, #miniQuote {
  width: 50%;
}
.miniProfileImage {
  width: 100px;
  height: 100px;
  display: block;
}

.profile {
  background: silver;
  display: flex;
}
.miniBioSegment {
  border: 1px dotted red;
}
#miniBio, #miniQuote {
  flex: 1;
}
.miniProfileImage {
  width: 100px;
  height: 100px;
  display: block;
}