Html 如何将侧边栏对齐？

我正在为员工传记写一页，上面有一张照片。要显示在左侧的传记（内容）和右侧作为侧边栏的员工照片。页面也有全宽的页脚

我使用CSS来布局页面，并且

float:left

内容和照片都设置了相应的宽度分割，但是照片（侧边）不显示在右侧，它显示在内容下，但是我对内容和侧边都使用了

display:inline

属性。我试图在

文章的右侧显示
旁边的


文章，h1，旁白，页脚{
填充：20px；
}
h1{
宽度：100%；
背景颜色：灰色；
}
文章{
宽度：60%
浮动：左；
显示：内联；
}
旁白{
宽度：40%；
浮动：左；
显示：内联；
}
页脚{
宽度：100%；
背景颜色：灰色；
明确：两者皆有；
}

传记
一般信息在这里

其余信息在这里

员工照片
版权在这里

应纠正几个问题：

您将
文章
和
旁边的宽度设置为60%和40%
，但是它们也有
填充：20px
，使总宽度超过100%，一个简单的解决方法是设置
框大小：边框框
，它使填充成为%width的一部分

如果在元素上设置
float:left
，则将其转换为替换的元素，
display:inline
或
block
将不会产生任何效果

出现语法错误，缺少
在
宽度的末尾：60%

最好还设置
img{max width:100%；height:auto；}
，使其具有响应性

以下是更新后的示例：


*{
框大小：边框框；
}
文章，h1，旁白，页脚{
填充：20px；
}
h1{
背景颜色：灰色；
}
文章{
宽度：60%；
浮动：左；
}
旁白{
宽度：40%；
浮动：左；
}
页脚{
背景颜色：灰色；
明确：两者皆有；
}
img{
最大宽度：100%；
高度：自动；
}

传记
一般信息在这里

其余信息在这里

员工照片
版权在这里

用flex容器包装即可

<div style="display:flex">
  <article>...</article>
  <aside>...</aside>
</div>
<footer>...</footer>


...
...
...