2-6练习 float居中显示问题
来源：2-8 主体部分的底部
本杰明这只驴
2017-08-20 14:26:47
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
*{padding:0;margin:0;}
.top{margin-top:50px;
text-align:center;
font-family:"微软雅黑";
font-size:36px;
}
img{width:213px;
height:120px;
}
.low{width:100%;
margin:0 auto;/*为什么这个没有作用*/
min-width:800px;
}
.div1,.div2{
width:213px;
float:left;
margin:10px;
}
.disc{font-family:"微软雅黑";
font-weight:bold;
font-size:0.5em;
}
/*此处写代码*/
</style>
</head>
<body>
<div class="top">ENJOY THE LIFE</div>
<div class="low">
<div class="div1">
<div class="pic">
<img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg">
</div>
<div class="disc">
I wondered lonely as a cloud,That floats on high o'er vales and hills,
When all at once i saw a crowd,A host,of golden daffodils;
Beside the lake,beneath the trees,Fluttering and dancing in the breeze.
</div>
</div>
<div class="div2">
<div class="pic">
<img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg">
</div>
<div class="disc">
I wondered lonely as a cloud,That floats on high o'er vales and hills,
When all at once i saw a crowd,A host,of golden daffodils;
Beside the lake,beneath the trees,Fluttering and dancing in the breeze.
</div>
</div>
</div>
<!-- 此处写代码 -->
</body>
</html>
margin:0 auto；无法使.low里的两个float模块居中；求
2回答
-
本杰明这只驴
提问者
2017-08-20
哎，问题解决了，谢谢老师；
这是什么原理呢？.low的宽度设置为100%也不可以吗？
0h017-08-20 -
Miss路
2017-08-20
参考下面的代码，不需要给low设置什么最大宽度最小宽度，这里给具体的宽度就行了，它的宽度＝312*2+10*4，即两张图片的宽度加上margin的10px。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
*{padding:0;margin:0;}
.top{margin-top:50px;
text-align:center;
font-family:"微软雅黑";
font-size:36px;
}
img{width:213px;
height:120px;
}
.low{width:466px;
margin:0 auto;
border: 1px solid red;
}
.div1,.div2{
width:213px;
float:left;
margin:10px;
}
.disc{font-family:"微软雅黑";
font-weight:bold;
font-size:0.5em;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="top">ENJOY THE LIFE</div>
<div class="low">
<div class="div1">
<div class="pic">
<img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg">
</div>
<div class="disc">
I wondered lonely as a cloud,That floats on high o'er vales and hills,
When all at once i saw a crowd,A host,of golden daffodils;
Beside the lake,beneath the trees,Fluttering and dancing in the breeze.
</div>
</div>
<div class="div2">
<div class="pic">
<img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg">
</div>
<div class="disc">
I wondered lonely as a cloud,That floats on high o'er vales and hills,
When all at once i saw a crowd,A host,of golden daffodils;
Beside the lake,beneath the trees,Fluttering and dancing in the breeze.
</div>
</div>
<div class="clear"></div>
</div>
<!-- 此处写代码 -->
</body>
</html>
祝学习愉快！
0
相似问题