61,115
社区成员
发帖
与我相关
我的任务
分享Div + CSS常用布局不明白的一个例子
我的问题是：1. 在下列代码中，div.content中的“margin-left:200px;”是相对left div, 还是相对Cotainer？但是如果是相对left，content显示的离left div的右边距离远远少于200px；即便是针对Cotainer，content div离container的右边距离远远少于200px，为什么？ 2. content div是否能用left: 2px；position:relative，而不是margin-left:200px;
代码如下：
<html>
<head>
<style type="text/css">
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
border: 1px solid yellow;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
border: 1px solid red;
}
div.content
{
margin-left:200px;
border:1px solid blue;
padding:1em;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><h1 class="header">W3School.com.cn</h1></div>
<div class="left"><p>William of Ockham (1285-1349)</p></div>
<div class="content">
<p>Content: At W3School.com.cn you will find
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
</div>
<div class="footer">Copyright 2008 by YingKe Investment.</div>
</div>
</body>
</html>
代码如下：
<html>
<head>
<style type="text/css">
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
border: 1px solid yellow;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
border: 1px solid red;
}
div.content
{
margin-left:200px;
border:1px solid blue;
padding:1em;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><h1 class="header">W3School.com.cn</h1></div>
<div class="left"><p>William of Ockham (1285-1349)</p></div>
<div class="content">
<p>Content: At W3School.com.cn you will find
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
</div>
<div class="footer">Copyright 2008 by YingKe Investment.</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
xflltw 2017-11-05
- 打赏
- 举报
谢谢
一念_天涯 2017-11-04
- 打赏
- 举报
每种布局都有优缺点，用自己喜欢，熟悉的布局就行。
xflltw 2017-11-04
- 打赏
- 举报
非常感谢回复。问题是left div是width:160px;，而content div的margin-left:200px;，也就是说left div的右border和content div的左border应该是40px，看显示效果，很明显不到40px的啊[/quote]
你 left 盒子有padding 啊，padding:1em ,默认的话 ，可视大小就为160 + 16*2 = 194 所以只差了 6px[/quote]
非常感谢回复。顺便问一下像这样的布局，最佳实践是否应该是使用float:left;，然后margin-left？加你QQ好友方便吗？
一念_天涯 2017-11-04
- 打赏
- 举报
非常感谢回复。问题是left div是width:160px;，而content div的margin-left:200px;，也就是说left div的右border和content div的左border应该是40px，看显示效果，很明显不到40px的啊[/quote]
你 left 盒子有padding 啊，padding:1em ,默认的话 ，可视大小就为160 + 16*2 = 194 所以只差了 6px
xflltw 2017-11-04
- 打赏
- 举报
非常感谢回复。问题是left div是width:160px;，而content div的margin-left:200px;，也就是说left div的右border和content div的左border应该是40px，看显示效果，很明显不到40px的啊
一念_天涯 2017-11-04
- 打赏
- 举报
margin表示两个元素之间的间距,可以是兄弟级别的，也可以是父子级别的.
在你这里，由于left div 浮动了（脱离文档流），所以 margin-left 是相对于container 的.
你margin-right 没有设置，肯定没有.
2.用相对定位。是相对于自己进行定位。由于前一个元素浮动，所以content 的默认位置为左边界处,left:2px 往右移了2px.但是由于文本是能够识别浮动的。所以文本 会在浮动元素之外显示。但content 的位置是在左边界2px处
