关于ABOUT区域图文混排的疑问？
关于这部分的实现，我的思路是一个大的div容器，里面写八个小的div，分别容纳图片和内容。大盒子宽度设置100%，给这8个div设置左浮动，并且将宽度设置为25%，但是尝试之后发现图片和文字描述并不能在同一列显示，请问是哪里出了问题？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="header"> <div class="logo"> <img src="image/logo.png"> </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"> <div class="banner-picture"> <img src="image/banner3.jpg"> </div> <!--遮罩层--> <div class="topLayer"> </div> <!--banner图部分的输入框--> <div class="topLayer-top"> <form class="form"> <input type="text" name="" placeholder="your Name"> <br> <input type="text" name="" placeholder="your Profile"> <br> <input type="text" name="" placeholder="your Email"> <textarea placeholder="Write your Comments Here"></textarea> <br> <button>FIND MESSAGE</button> </form> </div> </div> <div class="middle"> <div class="m-top"> <div class="m-top-title">ABOUT</div> <!--添加蓝色下划线--> <div class="m-top-underline"></div> <div class="m-top-description"> Lorem Ipsum is simply dummy text of the printing and typeseeting<br> industry. Lorem Ipsum has been the industry's standard dummy<br> text ever since the 1500s. </div> </div> <div class="m-middle"> <div class="m-middle-left"> <div class="word">A WORD ABOUT US</div> <div class="left-picture"> <div class="description">Praesent dignissim viverra est,sed<br> bibendum ligula congue non. Sed ax nislet<br> felis gravida commodo? Suspendisse<br> diam amet. </div> <div class="explore"> <button>EXPLORE</button> </div> </div> </div> <div class="m-middle-middle"> <img src="image/bb3.jpg"> </div> <div class="m-middle-right"> <div class="about-right-content1"> <div class="about-right-content1-number"> 70000 </div> <!--绘制蓝色下划线--> <div class="about-right-content1-underline"> </div> <div class="about-right-content1-word"> Students </div> </div> <div class="about-right-content2"> <div class="about-right-content2-number"> 600 </div> <!--绘制蓝色下划线--> <div class="about-right-content2-underline"> </div> <div class="about-right-content2-word"> Faculty </div> </div> </div> </div> </div> <!--清除浮动--> <div class="clear"></div> <!--about底部图文混排--> <div class="about-bottom"> <div class="content1-picture"> <img src="image/b1.jpg"> </div> <div class="content1-word"> <div class="title"> Conference Hall </div> <div class="paragraph1"> Lorem Ipsum is simply dummy text of the<br> printing and typesetting industry </div> <div class="paragraph2"> Lorem Ipsum has been the industry's standard dummy<br> text ever since the 1500s, when an unknown printer took<br> a gallery of type and scrambled it to make a type<br> specimen book. </div> </div> </div> </body> </html>
以下是CSS文件：
* {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 100px;
background: #07CBC9;
/*固定顶部页面*/
position: fixed;
/*将头部页面置于顶层*/
z-index: 10;
}
.header .logo {
float: left;
padding-top: 26px;
}
.header .nav {
float: right;
}
.header .nav ul {
padding-right: 100px;
}
.header .nav ul li {
display: inline-block;
list-style: none;
margin: 0 30px;
line-height: 100px;
}
.header .nav ul li a {
text-decoration: none;
color: white;
}
.header .nav ul li a:hover {
color: gold;
/*鼠标经过时产生加粗效果*/
font-weight: bolder;
}
.banner {
/*给顶部导航栏预留100px*/
padding-top: 100px;
width: 100%;
height: 1000px;
}
.banner .banner-picture img {
display: block;
top: 100px;
width: 100%;
height: 1000px;
}
.banner .topLayer {
width: 100%;
height: 1000px;
position: absolute;
top: 100px;
left: 0;
background: black;
opacity: 0.5;
}
.banner .topLayer-top {
padding-top: 100px;
position: absolute;
top: 100px;
width: 800px;
height: 800px;
z-index: 2;
margin: 50px 50%;
left: -400px;
background-color: transparent;
}
.banner form {
text-align: center;
}
.banner .form input {
margin: 10px;
width: 500px;
height: 40px;
color: white;
/*设定输入字体大小*/
font-size: 20px;
background-color: transparent;
border: 1px solid white;
}
.banner .form input:hover,
.banner .form textarea:hover {
border: 3px solid #07cbc9;
}
.banner .form input::placeholder {
color: white;
font-size: 20px;
}
.banner .form textarea::placeholder {
color: white;
font-size: 20px;
font-family: 微软雅黑;
}
.banner .form textarea {
margin: 10px;
width: 500px;
height: 100px;
background-color: transparent;
border: 1px solid white;
/*设定输入字体大小*/
font-size: 20px;
}
.banner .form button {
margin: 10px;
width: 150px;
height: 50px;
background-color: transparent;
color: white;
border: 1px solid #F2FFF3;
}
/* 鼠标滑过提交按钮时，按钮没有边框，背景颜色变成#07cbc9。*/
.banner .form button:hover {
border: none;
background-color: #07cbc9;
}
/*设置标题样式*/
.middle .m-top .m-top-title {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 50px;
padding-bottom: 10px;
}
/*为ABOUT下方添加蓝色下划线*/
.middle .m-top .m-top-underline {
top: 20px;
margin: 0 auto;
width: 30px;
height: 2px;
background-color: #07CBC9;
}
/*为描述文字设置样式*/
.middle .m-top .m-top-description {
line-height: 25px;
padding-top: 30px;
text-align: center;
color: gray;
}
/*为中间ABOUT部分主体设置居中样式*/
.middle {
margin: 0 auto;
width: 1308px;
}
.middle .m-middle .m-middle-left {
width: 370px;
float: left;
}
/*设置左侧标题文字样式*/
.middle .m-middle .m-middle-left .word {
padding-top: 10px;
padding-left: 150px;
text-align: center;
width: 200px;
font-size: 30px;
}
/*设置左侧描述文字样式*/
.middle .m-middle .m-middle-left .left-picture {
/*给左侧描述文字设置左浮动*/
float: left;
margin-left: 150px;
width: 370px;
height: 246px;
/*为左侧描述文字设置背景颜色和透明度*/
background: rgba(255, 255, 255, 0.5);
position: relative;
border: 1px solid gray;
}
.middle .m-middle .m-middle-left .left-picture .description {
color: black;
padding-left: 15px;
padding-top: 15px;
}
/*设置explore按钮的样式*/
.middle .m-middle .m-middle-left .left-picture .explore {
padding-left: 15px;
padding-top: 10px;
}
/*设置explore按钮的样式*/
.middle .m-middle .m-middle-left .left-picture button {
width: 102px;
height: 45px;
background-color: black;
border: 1px solid black;
color: white;
}
/* 中间部分左侧的EXPLORE按钮，鼠标移入时背景变为透明的，但是有黑色的边框*/
.middle .m-middle .m-middle-left .left-picture button:hover {
background-color: transparent;
color: black;
}
/*设置中间图片的样式*/
.middle .m-middle .m-middle-middle img {
padding-top: 15px;
float: left;
display: block;
width: 568px;
height: 380px;
}
/*设置图片右侧文字样式*/
.middle .m-middle .m-middle-right {
padding-top: 15px;
float: left;
width: 370px;
height: 400px;
}
/*设置ABOUT部分右上角样式*/
.middle .m-middle-right .about-right-content1 {
text-align: center;
margin-left: 30px;
width: 238px;
height: 144px;
border: 1px solid #07CBC9;
font-weight: bolder;
}
/*设置ABOUT右上角数字的样式*/
.middle .m-middle-right .about-right-content1 .about-right-content1-number {
font-size: 30px;
padding-top: 10px;
padding-bottom: 15px;
}
.middle .m-middle-right .about-right-content1 .about-right-content1-word{
font-size: 20px;
padding-top: 15px;
}
.middle .m-middle-right .about-right-content1 .about-right-content1-underline,.about-right-content2-underline{
margin: 0 auto;
width: 40px;
height: 2px;
background-color: #07CBC9;
}
/*设置ABOUT部分右下角样式*/
.middle .m-middle-right .about-right-content2 {
margin-top: 30px;
text-align: center;
margin-left: 30px;
width: 238px;
height: 144px;
border: 1px solid #07CBC9;
font-weight: bolder;
}
.middle .m-middle-right .about-right-content2 .about-right-content2-number{
font-size: 30px;
padding-top: 10px;
padding-bottom: 15px;
}
.middle .m-middle-right .about-right-content2 .about-right-content2-word{
font-size: 20px;
padding-top: 15px;
}
.about-bottom{
width: 100%;
}
.clear{
clear: both;
}
.about-bottom{
width: 100%;
}
.about-bottom .content1-picture{
width: 25%;
float: left;
}
.content1-word{
width: 25%;
background-color: #07CBC9;
float: left;
}24
收起
正在回答
2回答
同学你好，同学描述错误了，设置浮动之后，应该是同一行显示，不叫同一列。另外，同学回复区域给出的链接是本题的链接，没有办法看你另一个问题，不过没有关系，同学已经提问的问题，答疑老师都会解决的。老师这边测试同学的代码，盒子是在同一行显示的。只不过图片的父容器宽度是设置的百分比，会随着分辨率的缩放而缩放。但是图片默认显示原图大小，所以分辨率大的时候，图片不能铺满父容器，分辨率小的时候，图片又会超出父容器。
这里的解决方式就是给图片设置宽度100%，让它一直相当父容器100%显示。如下：
另外，这一块的代码和样式可以优化一下，参考如下：
通过about-bottom>div选中about-bottom下面的8个子元素，共同设置相同的样式
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
weixin_慕设计1308382
2020-07-18 10:11:56
我刚才发现这个实现不够好，尝试了另一种方法，但依然存在问题。问题链接：https://class.imooc.com/course/qadetail/241189
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星