css - 有关三栏布局问题，div没有对齐
本文介绍了css - 有关三栏布局问题，div没有对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我希望实现一个三栏布局，左右两侧宽度固定，中间的宽度自适应，但是现在右侧栏跟中间栏的底部对齐了，正常的文档流不是应该顶端对齐吗？，不知道为什么会出现这种情况。
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;
}
解决方案
三栏布局顺序反了，你的这种 css 布局，left right middle 在 html 中的顺序应该是：
left
right
middle
所有把 right 放在 middle 前面就可以了。
<div class="left">
//
</div>
<div class="right">
//
</div>
<div class="middle">
//
</div>这篇关于css - 有关三栏布局问题，div没有对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
