网站建设   网站建设技术   网页设计   html/css  

如何完成overflow-x: scroll;横向摆放div

人浏览  发布时间:2021-10-07

此处显示新 Div 标签的内容 此处显示新 Div 标签的内容 此处显示新 Div 标签的内容 此处显示新 Div 标签的内容...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.w .d1 {
background-color: #F00;
border: 1px solid #000;
height: 100px;
width: 100px;
float:left;
display:block
}
.w {
border: 1px solid #000;
height: 400px;
width: 300px;
overflow-x: scroll;
margin:auto
 
}
</style>
</head>
 
<body>
<div class="w"> //限定尺寸  
 
<div  style=" width: max-content;"> //必须为整体才可使overflow-x: scroll;有效,width: max-content;具有适应内部内容宽度尺寸
 
  <div class="d1">此处显示新 Div 标签的内容</div>  //横向摆放
   <div class="d1">此处显示新 Div 标签的内容</div>
    <div class="d1">此处显示新 Div 标签的内容</div>
     <div class="d1">此处显示新 Div 标签的内容</div>
 
</div> 
 
 
</div>
</body>
</html>
 

点击浏览下载讲义资料
(编辑:360°搜索建站)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:广东省深圳市宝安区西乡街道东方商务大厦 WebDesign ©2012 Corporation 360°搜索建站网 网站地图