我正在为一张图片制作员工传记页面。传记(内容)显示在左侧，员工照片显示在右侧作为侧边栏。该页面还有全宽页脚。
我使用 CSS 布局页面，float:left 内容和照片并相应地设置宽度划分，但是照片(旁边)没有显示在右边，而是出现在下面内容，但是我对内容和旁边都使用了 display:inline 属性。我试图在 article 的右侧显示 aside。
article, h1, aside, footer {
padding: 20px;
}
h1 {
width: 100%;
background-color: gray;
}
article {
width: 60%
float: left;
display: inline;
}
aside {
width: 40%;
float: left;
display: inline;
}
footer {
width: 100%;
background-color: gray;
clear: both;
}<body>
<article>
<h1>Biography</h1>
<p>General Information goes here</p>
<p>Rest of information goes here</p>
</article>
<aside>
<h2>Employee Photo</h2>
<img src="http://placehold.it/350x150" />
</aside>
<footer>
<p>Copyright goes here</p>
</footer>
</body>最佳答案
应更正几个问题:
article和aside的宽度设置为 60% 和 40%，但是它们也有padding:20px，使总宽度超过 100%，一个简单的修复方法是设置box-sizing:border-box，它将填充作为 % 宽度的一部分。如果您在一个元素上设置
float:left，这会将它变成一个替换元素、display:inline或block不会产生任何效果。语法错误，
width: 60%末尾缺少;。最好也设置
img {max-width:100%; height:auto;，使其响应。
下面是更新后的例子:
* {
box-sizing: border-box;
}
article, h1, aside, footer {
padding: 20px;
}
h1 {
background-color: gray;
}
article {
width: 60%;
float: left;
}
aside {
width: 40%;
float: left;
}
footer {
background-color: gray;
clear: both;
}
img {
max-width: 100%;
height: auto;
}<body>
<article>
<h1>Biography</h1>
<p>General Information goes here</p>
<p>Rest of information goes here</p>
</article>
<aside>
<h2>Employee Photo</h2>
<img src="http://placehold.it/350x150" />
</aside>
<footer>
<p>Copyright goes here</p>
</footer>
</body>关于html - 如何将一边对齐为侧边栏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34821614/