The 40layoutexercise from byr-gdp

40layoutexercise's Issues

inline-block并不是导致元素能够通过设置margin-left回到上一行的原因

Line 21 in 263a28e

 /*元素浮动后，display 变为 inline-block，所以后面的元素才可以通过 margin-left 负值来回到上一行*/ 

若不给wrapper设置float而设置inline-block，则navigation和extra不会回到上一行。感觉这个地方是float的一个特性，但是并不明白是什么特性。

首先非常感谢您写的这个样式库，让我能有各种布局的练习，我不知道是我的方式有问题（我将您的模版进行了修改，但保留了对应的结构），按照您的样式书写是有问题的，我的推测是应为您的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>

第5、 7、9个图错了

Three percentage columns(n.5)

要求

wrapper 右对齐且占据50%宽度
navigation、extra 宽度25%，依次位于content左侧

Three fixed columns(n.7)

要求

container 宽度700px且居中
wrapper 居中且宽度400px
extra、navigation 150px，依次位于content两侧

byr-gdp / 40layoutexercise Goto Github PK

40layoutexercise's People

Contributors

Stargazers

Watchers

Forkers

40layoutexercise's Issues

inline-block并不是导致元素能够通过设置margin-left回到上一行的原因

感觉意义不大。。

第13个图的实现有问题

第5、 7、9个图错了

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent