40LayoutExercise 第13个图的实现有问题

第13个图的实现有问题

Open zhenghan2017 opened this issue 4 years ago • 0 comments

首先非常感谢您写的这个样式库，让我能有各种布局的练习，我不知道是我的方式有问题（我将您的模版进行了修改，但保留了对应的结构），按照您的样式书写是有问题的，我的推测是应为您的content中的内容较长，宽度足以撑开，否则在float为浮动的情况下，margin：0 200px并不能实现居中的效果。我觉得稳妥的情况应该是将wrapper的宽度用calc(100% - 400px)计算出来，这样的情况下无论内容多少，都可以达到居中的效果。

不知道我上面的理解是否正确，如果有什么不对的，望您指出，谢谢！下面我放上我的代码

<!DOCTYPE html>
<html lang="zh-CN">

<meta charset="utf-8">
<title>三栏布局-浮动实现</title>
<link ref="stylesheet" href="normalize.css">

<style>
  .article {
    /* width: 700px; */
    /* margin: 0 200 0 200; */
  }

  .wrapper {
    /* width: 400px; */
    width: calc(100% - 400px);
    float: left;
    margin: 0 200px;
    background-color: yellow;
  }

  .nav {
    width: 200px;
    float: left;
    margin-left: -200px;
    background-color: red;
  }

  .aside {
    width: 200px;
    float: left;
    margin-left: -100%;
    background-color: blue;
  }

  .footer {
    clear: both;
  }
</style>

<body>
  <article class="article">
    <header class="header">Header</header>
    <div class="wrapper">
      <section>Content</section>
    </div>
    <nav class="nav">Navigation</nav>
    <aside class="aside">Extra stuff</aside>
    <footer class="footer">Footer</footer>
  </article>
</body>

Dec 31 '20 02:12 zhenghan2017

40LayoutExercise 40LayoutExercise copied to clipboard

第13个图的实现有问题

40LayoutExercise
40LayoutExercise copied to clipboard