有关三栏布局问题，div没有对齐？
我希望实现一个三栏布局，左右两侧宽度固定，中间的宽优艾设计网_Photoshop问答度自适应，但是现在右侧栏跟中间栏的底部对齐了，正常的文档流不是应该顶端对齐吗？，不知道为什么会出现这种情况。
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>task 3</title>
</head>
<body>
<div class="content"> <div class="left"> <img src="images/logo.jpg"> <span>糖果之家</span> </div> <div class="middle"> 这次，朴槿惠和韩国政府“摊上事了”！“总统朴槿惠正在深思熟虑如何平息亲信幕后干政争议。”韩联社10月27日报道称。随着媒体的曝光和民众的质疑不断增加，韩国总统朴槿惠亲信“干政”事件继续发酵，引发了全世界的关注，朴槿惠也面临上任以来最大的政治危机。 </div> <div class="right"> <img src="images/1.jpg"> <img src="images/1.jpg"> <img src="images/1.jpg"> <img src="images/1.jpg"> </div> </div>
</body>
</html>
css代码
*{
margin:0; padding: 0;
}
.content{
padding: 20px; overflow: hidden; background-color: #eee; border: 1px solid #999;
}
.left{
float: left; width: 200px; padding: 20px; box-sizing: border-box; border: 1px solid #999;
}
.left img{
float: left;
}
img{
width: 80px; height: 80px; border: 1px solid #999;
}
.middle{
margin-left:220px; margin-right: 140px; padding: 20px; border: 1px solid #999;
}
.right{
float: right; width: 120px; box-sizing: border-box; border: 1px solid #999;
}
.right img{
display: block; margin: 20px;
}
lixingke12 优艾设计网_设计LOGO 9小时前
三栏布局顺序反了，你的这种 css 布局，left right middle 在 html 中的顺序应该是：
ttyyyyttty 9小时前
所有把 right 放在 middle 优艾设计网_PS论坛前面就可以了。
加载中,请稍侯......
精彩评论