问题在注释
来源：2-7 编程练习
localhost999
2020-07-03 17:20:31
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
body{
width:100%;
}
.photo{
float:left;
width:450px;
text-align:center;
margin:0 auto;
/* margin:0 auto;在这里为什么不能居中？这里添加position:absolute;为什么会出现错乱？*/
}
.word{
width:450px;
}
div{
text-align:center;
}
.neirong{
width:100%;
background-color:pink;
overflow:hidden;
/*left:50%;*/
}
img,.word{
}
</style>
</head>
<body>
<div class="neirong">
<div>ENJOY THE LIFE</div>
<div class="photo">
<img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg">
<div class="word">life is like a book life is like a booklife is like a booklife is like a booklife is like a booklife is like a booklife is like a booklife is like a booklife is like a book
</div>
</div>
<div class="photo">
<img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg">
<div class="word">life is like a book life is like a booklife is like a booklife is like a booklife is like a booklife is like a booklife is like a booklife is like a booklife is like a book
</div>
</div>
</body>
</html>写回答
3回答
-
同学你好，这种布局是可以的，能够在水平方向上居中，很棒！
祝学习愉快！
0 -
localhost999
提问者
2020-07-03
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS布局</title> <style type="text/css"> *{ padding:0; margin:0; } body{ width:100%; } .photo{ float:left; width:450px; text-align:center; margin:0 auto; /* margin:0 auto;在这里为什么不能居中？这里添加position:absolute;为什么会出现错乱？*/ } .word{ width:450px; } div{ text-align:center; } .neirong{ width:100%; background-color:pink; overflow:hidden; /*left:50%;*/ } .big{ width:900px; margin:0 auto; } img,.word{ } </style> </head> <body> <div class="neirong"> <div>ENJOY THE LIFE</div> <div class="big"> <div class="photo"> <img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg"> <div class="word">life is like a book life is like a booklife is like a booklife is like a booklife is like a booklife is like a booklife is like a booklife is like a booklife is like a book </div> </div> <div class="photo"> <img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg"> <div class="word">life is like a book life is like a booklife is like a booklife is like a booklife is like a booklife is like a booklife is like a booklife is like a booklife is like a book </div> </div> </div> </div> </body> </html>0 -
好帮手慕星星
2020-07-03
同学你好，问题解答如下：
1、浮动的元素使用margin:0 auto;无效，常用于正常文档流或者和定位结合
2、浮动和绝对定位一起设置，浮动会失效，所以位置会发生变化
建议：给外层大盒子设置固定宽度，然后使用margin属性居中
3、另外图片下方文字是左对齐显示的，不需要居中。建议将修改两个小盒子宽度与图片宽度相等，一个左浮动，一个右浮动
自己测试下，祝学习愉快！
0h020-07-03
相似问题