如何设置about-bottom区域的文字的高度使得他同宽度的改变而改变使之成为一个正方形的区域？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="page">
<div class="top">
<div class="logo"><img src="images/logo.png" alt="logo"></div>
<div class="nav">
<ul>
<li><a href="#">HOME </a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<div class="banner">
<form>
<ul>
<li><input type="text" class="text" value="your Name"></li>
<li><input type="text" class="text" value="your Phone"></li>
<li><input type="text" class="text" value="your Email"></li>
<li><input type="textarea" class="textarea" value="Write Your Comment Here"></li>
<li><input type="button" class="button" value="SEND MESSAGE"></li>
</ul>
</form>
</div>
<div class="opacity"></div>
<div class="about">
<div class="about_top">
<h1>ABOUT</h1>
<p> Lorem Ipsum is simply dummy text of the printting and typesetting
industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<img src="images/bb3.jpg">
</div>
<div class="about-bottom">
<div class="pic">
<img src="images/b1.jpg">
</div>
<div class="about_text">
<h2>Library</h2>
<p> LOrem Ipsum is simply dummy text of the printting and typesetting industry LOrem Ipsum is simply dummy text of the printting and typesetting industry</p>
</div>
<div class="pic">
<img src="images/b2.jpg">
</div>
<div class="about_text">
<h2>Library</h2>
<p> LOrem Ipsum is simply dummy text of the printting and typesetting industry LOrem Ipsum is simply dummy text of the printting and typesetting industry</p>
</div>
</div>
</div>
<div class="gallery">
</div>
<div class="footer">
© 2016 imooc.com 京ICP备13046642号
</div>
</div>
</body>
</html>
*{margin:0; padding: 0;
font-family:"Microsoft YaHei UI"}
.page{width:100%;color:#FFF; }
.page .top{
width:100%;
height:50px;
background: #07cbc9;
line-height: 50px;
position:fixed;
z-index:99;
}
.page .top .logo{
width:260px;
height:48px;
margin-left:130px;
float:left;
}
.page .top .nav{
margin-right:40px;
}
.page .top .nav ul{
list-style: none;
float:right;
line-height: 50px;
}
.page .top .nav ul li{
float:left;
padding-left:25px;
}
.page .top .nav ul li a{
text-decoration: none;
color:#FFF;
}
.page .banner{
width:100%;
height:800px;
background:url("images/banner3.jpg") no-repeat 100% 100%;
position: absolute;;
top:50px;
z-index:50;
}
.page .opacity{
width:100%;
height:800px;
background:#000;
position: absolute;;
top:50px;
opacity:0.2;
z-index:1;
}
.page .banner ul{
text-align: center;
position: absolute;
z-index: 99;
margin:0 auto;
margin-top:300px;
display:block;
margin-left:35%;
line-height: 20px;
}
.page .banner ul li{
list-style: none;
padding-top:10px;
}
.text{
width:450px;
height:20px;
background: transparent;
color:#FFF;;
border:solid;
border-color:#FFF;
border-width: 2px;
padding:10px 0;
}
.textarea{
width:450px;
height: 120px;
border-color:#FFF;
border-width:2px;
border-style:solid;
background: transparent;
margin-top:20px;
color:#FFF;
}
.button{
width:120px;
height:40px;
border-color:#FFF;
border-width:2px;
border-style:solid;
background: transparent;
color:#FFF;
}
.about{
width:100%;
position:relative;
top:850px;
}
.about-top{
position: relative;;
top:1200px;
left:400px;
margin:0 auto;
color:#000;
}
.about-top img{
margin-top:100px;
margin-left:450px;
float:left;
width:396px;
height:396px;
display:inline;
position: relative;
top:800px;
}
.about-bottom img{
width: 25%;
height:auto;
float:left;
}
.about-bottom .pic .about_text{
width:25%;
height:100%;
float:left;
}
.about-bottom .about_text{
width:25%;
height:100%;
background: #07cbc9;
float:left;
}
.page .footer{
width:100%;
height:50px;
background: #07cbc9;
line-height: 50px;
text-align: center;
position: static; bottom:0;
正在回答
同学，你好。左侧区域可以宽高都自适应是因为左侧盒子里的图片可以宽高自适应，右侧盒子的高度如果不设置固定高度的话，就是由里边的内容撑开，里边内容的高度不能够和左侧区域的高度一致，因此只可以实现高度不变而宽度自适应，如图：
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星