Html 为什么连宽度都合适

发布于03月05日

Try to make this:

文章和旁白的宽度相同

header,main,aside,article,footer{
    background-color: lightblue;
    border: 3px solid red;
    height: 200px;
    margin: 0;
}

header {
}

main {
    width: 60%;
    float: left;
}

aside{
    width: 20%;
    float: left;
}

article {

    width: 20%;
    float: right;

}

footer{

    clear: both;
}

<header>
    <h2>Header</h2>
</header >

<main>
    <h2>Main</h2>
</main>

<aside>
    <h2>Aside</h2>
</aside>

<article>
    <h2>Article</h2>
</article>

<footer>
    <h2>Footer</h2>
</footer>

推荐答案

我会把它包起来.主要的在一边文章用一个flex容器阻塞.

.content {
  display: flex;
  gap: 10px;
}

.content {
  display: flex;
  gap: 10px;
}

.header,.main,.aside,.article,.footer{
  background-color: lightblue;
  border: 3px solid red;
  height: 200px;
  margin: 1em;
}

.main {
  width: 60%;
}

.aside {
  width: 20%;
}

.article {
  width: 20%;
}

<div class="container">
  <div class="header">HEADER</div>

    <div class="content">
      <div class="main">MAIN</div>
      <div class="aside">ASIDE</div>
      <div class="article">ARTICLE</div>
    </div>

  <div class="footer">FOOTER</div>
</div>