使用 css 单独文件与写在 style 里为何效果不一样？

2016-07-07 10:19:35 +08:00
 CareiOS

初学 html5 写网页，想写一个 V2EX 这样的布局，如果用单独的 css 文件来布局就可以，如果写在 div 的 style 中， div 就会换行。这两种写法效果应该一样的呀。

a.css 内容:

.mcenter{margin:0 410px 0 210px; background:#ffe6b8; height:600px;}
.mright{width:400px; margin-bottom:-3000px; padding-bottom:3000px; background:#f0f3f9; float:right;}

html 为：

<!DOCTYPE html>
<html>
<head>
   <title>布局实例</title>
   <link rel="stylesheet" href="a.css" media="all">
   <meta charset="utf-8"/>
</head>
<body>

   <div class="mright">右边，无高度属性，自适应于最高一栏的高度</div>
   <div class="mcenter">中间，高度 600 像素，左右两栏的高度与之自适应</div>

   <div>
   <div id="center" style="margin:0 410px 0 210px; background:#ffe6b8; height:600px;"></div>
   <div id="sill" style="width:400px; margin-bottom:-3000px; padding-bottom:3000px; background:#f0f3f9; float:right;"></div>
   </div>
</body>
</html>
4810 次点击
所在节点    HTML
4 条回复
lonelinsky
2016-07-07 10:32:16 +08:00
因为你把 sill 和 center 的顺序写反了呀，你调整下先后顺序再看看
SpicyCat
2016-07-07 10:40:22 +08:00
把 right div 放到 center div 上面
这样：

<div id="sill" style="width:400px; margin-bottom:-3000px; padding-bottom:3000px; background:#f0f3f9; float:right;">sill</div>
<div id="center" style="margin:0 410px 0 210px; background:#ffe6b8; height:600px;">center</div>
CareiOS
2016-07-07 12:27:40 +08:00
@SpicyCat
@lonelinsky
顺序是， float 在哪边就要先放那边是吗？
lonelinsky
2016-07-07 14:12:18 +08:00
@CareiOS 非前端工程师，我的理解是这样的：
一个 div 如果没有设置 float 属性的时候，默认的 display 是 block ，会独占一行，所以写在后面的换行了。
而一旦设置了 float 属性，则会根据设置的方向，占用一部分，这个时候行面的元素如果可以在空出来的部分摆放下的会，就会占用空出来的部分，而不是直接占用下一行。

简单点说， float 属性不光影响了自己的位置，同时也影响了跟在其后面的元素的布局方式。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/290795

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX