Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

第13个图的实现有问题 #6

Open
zhenghan2017 opened this issue Dec 31, 2020 · 0 comments
Open

第13个图的实现有问题 #6

zhenghan2017 opened this issue Dec 31, 2020 · 0 comments

Comments

@zhenghan2017
Copy link

首先非常感谢您写的这个样式库，让我能有各种布局的练习，我不知道是我的方式有问题（我将您的模版进行了修改，但保留了对应的结构），按照您的样式书写是有问题的，我的推测是应为您的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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@zhenghan2017