                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS深入理解之overflow

6:52布局是如何写的？

我的布局

img

<div>img</div>

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

扇扇要努力

2015-08-24

源自：CSS深入理解之overflow 3-1

关注问题我要回答

1705

操作

收起

7 回答

qq_听说_0
2015-08-25

代码截图

0 回复有任何疑惑可以回复我~

qq_听说_0
2015-08-25

<!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 回复有任何疑惑可以回复我~

qq_听说_0
2015-08-25

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

0 回复有任何疑惑可以回复我~

#1

扇扇要努力提问者

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

2015-08-25 回复有任何疑惑可以回复我~

扇扇要努力提问者
2015-08-24

如果对上文中div.right设置clear：both效果如下图

跟老师实现效果并不一样，请问老师代码结构是怎样？

0 回复有任何疑惑可以回复我~

扇扇要努力提问者
2015-08-24

<!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 回复有任何疑惑可以回复我~

qq_听说_0
2015-08-24

贴图看一下

0 回复有任何疑惑可以回复我~

扇扇要努力提问者
2015-08-24

<div class="right">

<img class="left" src="1.jpeg">

<div>

<img src="2.jpeg">

</div>

</div>

0 回复有任何疑惑可以回复我~

#1

扇扇要努力提问者

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

2015-08-24 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

CSS深入理解之overflow

参与学习 41729 人
解答问题 78 个

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

本课相似问答

1 回答两栏自适应布局

1 回答两栏自适应布局

2 回答两栏自适应布局

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

1 回答IE 6?

搜索更多本课相关问答

6:52布局是如何写的？

我要回答关注问题

意见反馈帮助中心 APP下载