40LayoutExercise

40LayoutExercise copied to clipboard

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

zhenghan2017

第5、 7、9个图错了

1

5. Three percentage columns(n.5) 要求 1. wrapper 右对齐且占据50%宽度 2. navigation、extra 宽度25%，依次位于content左侧  7. Three fixed columns(n.7) 要求 1. container 宽度700px且居中 2. wrapper 居中且宽度400px 3. extra、navigation 150px，依次位于content两侧 

laampui

https://github.com/byr-gdp/40LayoutExercise/blob/263a28effd706b1aa9f75c43065deba86bab4948/v2/1.html#L21 若不给wrapper设置float而设置inline-block，则navigation和extra不会回到上一行。感觉这个地方是float的一个特性，但是并不明白是什么特性。

ghost