容器宽度的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3-4 编程练习</title>
<style type="text/css">
/*框架*/
html, body{
margin:10px;
padding:0;
}
/*容器*/
.container {
border:1px #ccc dashed;
overflow: hidden;
padding:10px;
}
/*块区*/
.block{
float:left;
border:1px #ccc solid;
width:15%;
margin:10px;
}
/*去除浮动*/
.empty {
clear:both;
}
/*图片*/
img{
height:80%;
width:100%;
}
/*文本*/
.txt {
height:20%;
}
</style>
</head>
<body>
<!-- 容器 -->
<div class="container">
<!-- 前三块 -->
<div class="block">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<div class="txt">欢迎来到慕课网学习新知识！</div>
</div>
<div class="block">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
<div class="txt">欢迎来到慕课网学习新知识！</div>
</div>
<div class="block">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
<div class="txt">欢迎来到慕课网学习新知识！</div>
</div>
<!-- 去除浮动的空标签 -->
<div class="empty"></div>
<!-- 后三块 -->
<div class="block">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<div class="txt">欢迎来到慕课网学习新知识！</div>
</div>
<div class="block">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
<div class="txt">欢迎来到慕课网学习新知识！</div>
</div>
<div class="block">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
<div class="txt">欢迎来到慕课网学习新知识！</div>
</div>
</div>
</body>
</html>
用空标签去除浮动后，容器宽度貌似有默认值，怎么调节容器宽度啊？
0
收起
正在回答
2回答
你的想法是正确的，不过在实际的开发中，为了保证图片不会模糊，整个布局不会错位，百分比和固定的宽高都是混合使用的，举个例子，譬如慕课网的首页，最上面的导航栏设置的是百分比，会随着浏览器窗口的变化而变化，中间内容部分则设计的就是固定的宽高，具体怎么使用，还是要看你对这个网页的是如何设计的。
关于本小题，同学可以参考如下代码进行修改，祝学习愉快~
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0px;
margin:0px;
}
.main{
border:2px dashed gray;
width:815px;
height:390px;
/*overflow:hidden;
zoom:1;*/
}
.a{
overflow:hidden;
zoom:1;
}
.a>div{
/*width:200px;
height:100px;*/
border:2px solid gray;
font-family:"微软雅黑";
float:left;
margin:20px 0px 0px 20px;
}
.b{
overflow:hidden;
zoom:1;
}
.b>div{
/*width:200px;
height:100px;*/
border:2px solid gray;
font-family:"微软雅黑";
float:left;
/*margin:0px 10px;*/
margin:20px 0px 0px 20px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="main">
<div class="a">
<div class="a1">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div class="a2">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div class="a3">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
<div>欢迎来到慕课网学习新知识!</div>
</div>
</div>
<div class="b">
<div class="b1">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"/>
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div class="b2">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"/>
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div class="b3">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"/>
<div>欢迎来到慕课网学习新知识!</div>
</div>
</div>
</div>
</body>
</html>
chrismorgen
2018-10-14 14:16:03
直接给容器设置固定的宽高即可，譬如width:810px;，然后图片的宽高尽量不要使用百分比来设置，建议你都使用固定的px值来设置，否则图片的大小会根据容器的宽高进行缩放，祝学习愉快~
从网页搭建入门Java Web2018版
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10204 个
如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星