html - 如何将一边对齐为侧边栏？-6ren

html - 如何将一边对齐为侧边栏？

转载作者：行者123 更新时间：2023-11-28 16:34:26

我正在为一张图片制作员工传记页面。传记(内容)显示在左侧，员工照片显示在右侧作为侧边栏。该页面还有全宽页脚。

我使用 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>