优艾设计网

有关三栏布局问题,div没有对齐?

优艾设计网 https://www.uibq.com 2022-12-30 07:50 出处:网络 作者:磨皮美容教程
我希望实现一个三栏布局,左右两侧宽度固定,中间的宽优艾设计网_Photoshop问答度自适应,但是现在右侧栏跟中间栏的底部对齐了,正常的文档流不是应该顶端对齐吗?,不知道为什么会出现这种情况。html代码 <!DOCT

我希望实现一个三栏布局,左右两侧宽度固定,中间的宽优艾设计网_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论坛前面就可以了。


0

精彩评论

暂无评论...
验证码 换一张
取 消