Question

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

我使用CSS来布局页面，并使用float:left内容和照片，并相应地设置宽度，但照片（旁边）不显示在右侧，它出现在内容下，但我使用内容和旁边的display:inline属性。我想在aside的右侧显示article。

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>

Answer 1

应该纠正几个问题：

article和aside的宽度设置为60％和40％，但是它们也有padding:20px，总宽度超过100％，很容易修复将设置box-sizing:border-box，它将填充作为％宽度的一部分。
如果您在元素上设置float:left，则会将其转换为替换元素，display:inline或block不会任何影响。
语法错误，在;结尾处缺少width: 60%。
最好还设置img {max-width:100%; height:auto;}，以使其具有响应能力。

以下是更新的示例：

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 2

用flex容器包裹它即可。

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

如何作为侧边栏对齐？

2 个答案: