6:52布局是如何写的？-慕课网

首页课程实战体系课手记专栏慕课教程

6:52布局是如何写的？

来源：3-1 Overflow与块状格式上下文

扇扇要努力

2015-08-24 15:28

我的布局

img

狗眼clear:both即对divclear：both，并未达到视频中的效果。

写回答关注

7回答

qq_听说_0

2015-08-25 13:19:59

代码截图

0 0
qq_听说_0

2015-08-25 13:18:20

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.left{
float: left;
width: 256px;
}
.right{
min-height: 171px;
background-color: #becceb;
clear:both;
}
</style>
</head>
<body>
<div>
<div>
<img src="img/1.jpg"/>
</div>
<div>
<img src="img/2.jpg" />
</div>
</div>
</body>
</html>
你跑一下这个代码，看看是不是要这个样子

0 0
qq_听说_0

2015-08-25 10:19:55

你的代码里面没有left和right视频里的效果跟你贴的这个效果有什么不一样的？还是没太懂你的意思

1 0

扇扇要努力

视频中第一张图后面也有背景，我实现的第一张图后面没有背景。。。我的代码贴错了。。结构是 img.left <div.right>img</div>

2015-08-25 12:04:57

共 1 条回复 >
扇扇要努力

2015-08-24 21:25:19

如果对上文中div.right设置clear：both效果如下图
跟老师实现效果并不一样，请问老师代码结构是怎样？

0 0

扇扇要努力: 2015-08-24 21:22:56

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.left{
float: left;
width: 128px;
}
.right{
min-height: 190px;
background-color: #beceeb; 
}
</style>
</head>
<body>
<img src="../1.png">
<div>
<img src="../2.png">
</div>
</body>
</html>

0 0

qq_听说_0

2015-08-24 16:33:58

贴图看一下

1 0

共 1 条回复 >
扇扇要努力

2015-08-24 16:13:48

<div class="right">
<img class="left" src="1.jpeg">
<div>
<img src="2.jpeg">
</div>
</div>

1 0

扇扇要努力

感觉不像是这样写的，求教呀求教

2015-08-24 16:28:53

共 1 条回复 >

CSS深入理解之overflow

深入理解overflow相关特性及实际应用，为你打开另外一扇学习之窗

41729 学习 · 78 问题

查看课程

相似问题

两栏自适应布局

回答 1

两栏自适应布局

回答 1

两栏自适应布局

回答 2

最后那个自适应布局貌似无效

回答 2

IE 6?

回答 1

打开慕课网App查看更多内容