about图片部分用的浮动，为啥清除不了。下面gallery部分总是跑到最前面

HTML代码部分：

</div>

<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>

<form>

</form>

</div>

</div>

</div>

<p>

Lorem Ipsum is simply dummy text of the printing and typesetting<br/>

industry.Lorem Ipsum has been the industry's standard dummy<br/>

text ever since the 1500s.

</p>

</div>

<h2 class="footer-text">A WORD<br/> ABOUT US</h2>

<p>Praesent dignissim viverra est,sed</p>

<p>bibendum liguda commodo?Suspendisse eget</p>

<p>ullamcorper ipsum.Sumspendisse diam amet.</p>

</div>

<p class="footer-r-text2">Students</p>

</div>

<p class="footer-r-text2">Faculty</p>

</div>

</div>

<h3>Library</h3>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

</p>

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

</p>

</div>

<h3>Computer Lab</h3>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

</p>

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

</p>

</div>

<h3>Conference Hall</h3>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

</p>

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

</p>

</div>

<h3>Play Ground</h3>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

</p>

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

</p>

</div>

</div>

</div>

<p>

Lorem Ipsum is simply dummy text of the printing and typesetting<br/>

industry.Lorem Ipsum has been the industry's standard dummy<br/>

text ever since the 1500s.

</p>

</div>

<div class="gallery-box-text">SCIENCE LAB</div>

</div>

<div class="gallery-box-text">INDOOR STADIUM</div>

</div>

<div class="gallery-box-text">TRANSPORTATION</div>

</div>

</div>

<div class="gallery-box-text">MEDITATION CLASSES</div>

</div>

<div class="gallery-box-text">KIDS PLAY GROUND</div>

</div>

</div>

CSS部分：

margin: 0;

padding: 0;

list-style: none;

text-decoration: none;

font-family:Microsoft YaHei UI;

}

.header{

width:100%;

margin: 0 auto;

height: 80px;

background-color:#07cbc9;

position: fixed;

top: 0;

left: 0;

z-index: 2;

}

.logo{

float: left;

padding-top: 16px;

margin-left: 150px;

}

.nav{

float: right;

margin-right: 100px;

}

.nav li{

display: inline-block;

margin-right:20px;

line-height: 80px;

}

.nav a{

color:#fff;

font-weight: 700;

}

.nav a:hover{

background-color:mediumpurple;

}

.banner{

width: 100%;

height: 500px;

position: relative;

margin-top:80px;

/*给头部加了固定定位,会压住下方图片,这时需要给图片父盒子一个maigin-top值*/

}

.banner img{

width: 100%;

height: 500px;

z-index: 1;

}

.layer{

width: 100%;

height:500px;

background-color: #000;

position: absolute;

top:0;

opacity: 0.1;

}

.input-three,.input-two,.input-one{

border: 2px solid #808080;

background-color:rgba(0,0,0,0);

font-size: 16px;

}

.input-one{

width: 500px;

height: 40px;

}

.input-two{

width: 500px;

height: 120px;

}

.input-three{

width:128px;

height: 42px;

cursor:pointer;

color:#808080;

line-height: 42px;

font-size: 12px;

/*border-radius: 8px;*/

}

.banner-middle{

width: 520px;

height: 300px;

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

}

.banner-middle p{

padding: 5px;

}

.banner-middle input{

padding: 0 10px;

}

.input-three-p{

width:95px;

margin: auto;

/*margin-left: 186px;*/

}

.input-one:hover{

border: 2px solid #07cbc9;

}

.input-two:hover{

border: 2px solid #07cbc9;

}

.input-three:hover{

border: 0;

color: #fff;

background-color:#07cbc9 ;

}

.about{

width:100%;

height: 500px;

}

.title{

width: 100px;

margin: 0 auto;

font-size: 25px;

}

.title h2{

text-align: center;

}

.title span{

border-bottom:2px solid #07cbc9;

}

.quotation{

width: 100%;

/*background-color:yellow;*/

text-align: center;

line-height: 1.5em;

margin-top: 15px;

}

.title-quotation-father{

margin:40px 0;

}

.footer{

width: 100%;

/*background-color: pink;*/

position: relative;

}

.footer img{

width: 600px;

}

.footer-img{

width: 600px;

margin:0 auto;

}

.footer-text{

width:140px;

font-size: 25px;

font-weight: 400;

/*background-color: yellow;*/

text-align: center;

}

.footer-left{

width:370px;

/*background-color: green;*/

padding: 20px;

line-height:1.6em;

font-size: 14px;

border: 1px solid #808080;

background-color: rgba(255,255,255,0.2);

}

.footer-left input{

margin-top:20px;

width: 100px;

height: 40px;

line-height: 40px;

background-color: #000;

border:0;

color: #fff;

}

.footer-left input:hover{

background-color: #000;

opacity: 0.4;

cursor: pointer;

border: 2px solid #000;

}

.tffater{

position: absolute;

top: 38px;

left:260px

}

.footer-r-top,.footer-r-bottom{

width: 238px;

height: 120px;

border: 1px solid #07cbc9;

/*background-color:green;*/

padding-top:40px

}

.footer-r-top{

margin-bottom:40px;

position: absolute;

top: 0;

right: 192px;

}

.footer-r-bottom{

position: absolute;

top: 180px;

right: 192px;

}

.footer-r-text1,.footer-r-text2{

width: 100px;

height: 40px;: ;

margin: 0 auto;

text-align: center;

/*background-color: yellow;*/

padding: 8px;

line-height: 40px;

}

.footer-r-text1{

font-size:25px;

font-weight:700;

}

.footer-r-text1 span{

display: inline-block;

height: 50px;

/*background-color: green;*/

border-bottom: 2px solid #07cbc9;

}

.about-footer{

width: 100%;

min-height: 790px;

/*background-color: pink;*/

margin-top: 80px;

position: relative;

overflow:hidden;

zoom: 1; /*清除浮动,解决浮动后出现的缝隙*/

}

.img1,.about-footer-text{

float: left;

width: 25%;

height: 395px;

}

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.clearfix {

*zoom: 1;

}

.about-footer-text{

background-color: #07cbc9;

line-height: 1.5em;

}

.about-footer-text h3{

color: #fff;

font-size: 22px;

margin: 20px;

}

.about-footer-text p{

margin: 20px;

}

.about-footer-text input,.about-footer-input{

width: 100px;

height: 40px;

margin:0 auto ;

/*background-color: red;*/

}

.about-footer-text input{

background-color: #000;

border:0;

color: #fff;

}

.about-footer-text input:hover{

background-color: rgb(0,0,0,0.2);

cursor: pointer;

border: 1px solid #000;

}

.about-footer-input{

padding-top: 20px;

}

.about-p1{

color: #F7F2EA;

}

.about-p2{

color: #DDD;

}

.triangle1{

width:0;

height:0;

border-width: 12px 22px 12px 2px;

border-style: solid;

border-color: transparent #07cbc9 transparent transparent;

position: absolute;

top:186px;

left:356px;

}

.triangle2{

width:0;

height:0;

border-width: 12px 22px 12px 2px;

border-style: solid;

border-color: transparent #07cbc9 transparent transparent;

position: absolute;

top:186px;

right:380px;

}

.triangle3{

width:0;

height:0;

border-width: 12px 2px 12px 22px;

border-style: solid;

border-color: transparent transparent transparent #07cbc9;

position: absolute;

top:578px;

left:380px;

}

.triangle4{

width:0;

height:0;

border-width: 12px 2px 12px 22px;

border-style: solid;

border-color: transparent transparent transparent #07cbc9;

position: absolute;

top:578px;

right:356px;

}

.gallery{

width: 100%;

background-color: pink;

}

_TonyStark 2019-06-25

源自：项目：网页布局案例 2-10 作业题

收起

4回答

樱桃小胖子回答被采纳获得+3积分 2019-06-26 11:18:26

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/index.css">
</head>
 
<body>
    <div class="header">
        <div class="logo">
            <a href="2-10.html"><img src="images/logo.png" alt="logo"/></a>
        </div>
        <ul class="nav">
            <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 class="banner">
        <img src="images/banner3.jpg"/>
        <div class="layer"></div>
        <!--给图片加遮罩-->
        <div class="banner-middle">
            <form>
                <p><input type="text" placeholder="your Name" class="input-one" /></p>
                <p><input type="text" placeholder="your Phone" class="input-one" /></p>
                <p><input type="text" placeholder="your E mail" class="input-one" /></p>
                <p><input type="text" placeholder="Write Your Comment Here" class="input-two" /></p>
                <p class="input-three-p"><input type="submit" value="SEND MESSAGE" class="input-three" /></p>
            </form>
        </div>
    </div>
    <!--banner部分完成-->
    <div class="about">
        <div class="title-quotation-father">
            <div class="title">
                <h2>AB<span>O</span>UT</h2>
            </div>
            <div class="quotation">
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting<br />
                    industry.Lorem Ipsum has been the industry's standard dummy<br />
                    text ever since the 1500s.
                </p>
            </div>
        </div>
        <div class="footer">
            <div class="tffater">
                <h2 class="footer-text">A WORD<br/> ABOUT US</h2>
                <div class="footer-left">
                    <p>Praesent dignissim viverra est,sed</p>
                    <p>bibendum liguda commodo?Suspendisse eget</p>
                    <p>bibendum liguda commodo?Suspendisse eget</p>
                    <p>bibendum liguda commodo?Suspendisse eget</p>
                    <p>ullamcorper ipsum.Sumspendisse diam amet.</p>
                    <input value="EXPLORE" type="submit" />
                </div>
            </div>
            <div class="footer-img">
             <img src="images/bb3.jpg"/>
            </div>
            <div class="rightbox">
             <div class="footer-r-top">
                <p class="footer-r-text1">7<span>000</span>0</p>
                <p class="footer-r-text2">Students</p>
            </div>
            <div class="footer-r-bottom">
                <p class="footer-r-text1"><span>600</span></p>
                <p class="footer-r-text2">Faculty</p>
            </div>
            </div>
        </div>
        <!--about上半部分结束-->
        <div class="about-footer clearfix">
         <div class="img1">
         <img src="images/b1.jpg"/>
         </div>
            <!-- <div class="triangle1"></div> -->
            <!--三角形-->
            <div class="about-footer-text triangle1">
                <h3>Library</h3>
                <p class="about-p1">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </p>
                <p class="about-p2">
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                </p>
                <div class="about-footer-input"><input type="submit" value="EXPLORE" /></div>
            </div>
            <div class="img1">
             <img src="images/b2.jpg"/>
            </div>
            <!-- <div class="triangle2"></div> -->
            <!--三角形-->
            <div class="about-footer-text triangle1">
                <h3>Computer Lab</h3>
                <p class="about-p1">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </p>
                <p class="about-p2">
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                </p>
                <div class="about-footer-input"><input type="submit" value="EXPLORE" /></div>
            </div>
            <div class="about-footer-text triangle2">
                <h3>Conference Hall</h3>
                <p class="about-p1">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </p>
                <p class="about-p2">
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                </p>
                <div class="about-footer-input"><input type="submit" value="EXPLORE" /></div>
            </div>
            <div class="img1">
             <img src="images/b3.jpg"/>
            </div>
            <!-- <div class="triangle3"></div> -->
            <!--三角形-->
            <div class="about-footer-text triangle2">
                <h3>Play Ground</h3>
                <p class="about-p1">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </p>
                <p class="about-p2">
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                </p>
                <div class="about-footer-input"><input type="submit" value="EXPLORE" /></div>
            </div>
            <div class="img1">
             <img src="images/b4.jpg"/>
            </div>
            <!-- <div class="triangle4"></div> -->
            <!--三角形-->
        </div>
    </div>
    <!--about 下半部分结束-->
    <div class="gallery">
        <div class="gallery-h2"><h2>GA<span>LL</span>ERY</h2>
        </div>
        <div class="gallery-text">
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting<br />
                industry.Lorem Ipsum has been the industry's standard dummy<br />
                text ever since the 1500s.
            </p>
        </div>
        <div class="gallery-box">
            <img src="images/03-01.jpg"/>
            <div class="gallery-box-text">SCIENCE LAB</div>
        </div>
        <div class="gallery-box">
            <img src="images/03-02.jpg"/>
            <div class="gallery-box-text">INDOOR STADIUM</div>
        </div>
        <div class="gallery-box">
            <img src="images/03-03.jpg"/>
            <div class="gallery-box-text">TRANSPORTATION</div>
        </div>
        <div class="gallery-box">
            <img src="images/03-04.jpg"/>
            <div class="gallery-box-text">KIDS ROOM</div>
        </div>
        <div class="gallery-box">
            <img src="images/03-05.jpg"/>
            <div class="gallery-box-text">MEDITATION CLASSES</div>
        </div>
        <div class="gallery-box">
            <img src="images/03-06.jpg"/>
            <div class="gallery-box-text">KIDS PLAY GROUND</div>
        </div>
    </div>
    <!--gallery部分结束-->
</body>
 
</html>

收起回答

樱桃小胖子 2019-06-26 11:18:11

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family:Microsoft YaHei UI;
}
.header{
    width:100%;
    /*margin: 0 auto;*/
    height: 80px;
    background-color:#07cbc9;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}
.logo{
    float: left;
    padding-top: 16px;
    margin-left: 150px;
}
.nav{
    float: right;
    margin-right: 100px;
}
.nav li{
    /*display: inline-block;*/
    float:left;
    margin-right:20px;
    line-height: 80px;
}
/*添加如下代码，否则鼠标经过导航时背景色高度不够*/
.nav li a{
    display:block;
    float:left;
    color:#fff;
    font-weight: 700;
}
.nav a:hover{
    background-color:mediumpurple;
}
.banner{    
    width: 100%;
    height: 500px;
    position: relative;
    margin-top:80px;
    /*给头部加了固定定位,会压住下方图片,这时需要给图片父盒子一个maigin-top值*/
}
.banner img{
    width: 100%;
    height: 500px;
    z-index: 1;
}
.layer{
    width: 100%;
    height:500px;
    background-color: #000;
    position: absolute;
    top:0;
    opacity: 0.1;
}
.input-three,.input-two,.input-one{
    border: 2px solid #808080;
    background-color:rgba(0,0,0,0);
    font-size: 16px;
}
.input-one{
    width: 500px;
    height: 40px;
}
.input-two{
    width: 500px;
    height: 120px;
}
.input-three{
    width:128px;
    height: 42px;
    cursor:pointer;
    color:#808080;
    line-height: 42px;
    font-size: 12px;
    /*border-radius: 8px;*/
}
.banner-middle{
    width: 520px;
    height: 300px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.banner-middle p{
    padding: 5px;
}
.banner-middle input{
    padding: 0 10px;
}
.input-three-p{
    width:95px;
    margin: auto;
    /*margin-left: 186px;*/
}
.input-one:hover{
    border: 2px solid #07cbc9;
}
.input-two:hover{
    border: 2px solid #07cbc9;
}
.input-three:hover{
    border: 0;
    color: #fff;
    background-color:#07cbc9 ;
}
.about{
    width:100%;
    /*这里不需要设置高度，让高度有内容撑开即可，否则高度过低，会导致后面的内容显示在上面*/
    /*height: 500px;*/
} 
.about .title{
    width: 100px;
    margin: 0 auto;
    font-size: 25px;
}
.about .title h2{
    text-align: center;
}
.about .title span{
    border-bottom:2px solid #07cbc9;
}
.about .quotation{
    width: 100%;
    /*background-color:yellow;*/
    text-align: center;
    line-height: 1.5em;
    margin-top: 15px;
}
.about .title-quotation-father{
    margin:40px 0;
}
.about .footer{
    /*width: 100%;*/
    width:1160px;
    /*background-color: pink;*/
    /*position: relative;*/
    margin:0 auto;
}
/*左侧*/
.tffater{
    width:370px;
    float:left;
    position:relative;
    left:100px;
}
.footer-text{
    width:140px;
    font-size: 25px;
    font-weight: 400;
    /*background-color: yellow;*/
    text-align: center;
}
.footer-left{
    width:370px;
    /*background-color: green;*/
    padding: 20px;
    line-height:1.6em;
    font-size: 14px;
    border: 1px solid #808080;
    background-color: rgba(255,255,255,0.2);
}
.footer-left input{
    margin-top:20px;
    width: 100px;
    height: 40px;
    line-height: 40px;
    background-color: #000;
    /*border:0;*/
    /*要设置默认边框，否则鼠标经过时会发生抖动*/
    border: 2px solid #000;
    color: #fff;
}
.footer-left input:hover{
    /*background-color: #000;*/
    /*opacity: 0.4;*/
    /*按钮在鼠标经过的时候是全透明的，可以使用transparent*/
    background: transparent;
    color:#000;
    cursor: pointer;
    border: 2px solid #000;
}
/*.footer img{
    width: 600px;
}*/
.footer-img{
    width: 530px;
    float:left;
    /*margin:0 auto;*/
}
.footer-img img{
    width:100%;
}
/*.tffater{
    position: absolute;
    top: 38px;
    left:260px;
}*/
.rightbox{
    width: 240px;
    float:right;
}
.footer-r-top,.footer-r-bottom{
    width: 238px;
    height: 120px;
    border: 1px solid #07cbc9;
    /*background-color:green;*/
    /*padding-top:40px*/
    padding-top:40px;
}
.footer-r-bottom{
    margin-top:10px;
}
/*.footer-r-top{
    margin-bottom:40px;
    position: absolute;
    top: 0;
    right: 192px;  
}
.footer-r-bottom{
    position: absolute;
    top: 180px;
    right: 192px;  
}*/
.footer-r-text1,.footer-r-text2{
    width: 100px;
    height: 40px;: ;
    margin: 0 auto;
    text-align: center;
    /*background-color: yellow;*/
    padding: 8px;
    line-height: 40px;
}
.footer-r-text1{
    font-size:25px;
    font-weight:700;
}
.footer-r-text1 span{
    display: inline-block;
    height: 50px;
    /*background-color: green;*/
    border-bottom: 2px solid #07cbc9;
}
.about-footer{
    width: 100%;   
    min-height: 790px;
    /*background-color: pink;*/
    margin-top: 80px;
    position: relative;
    overflow:hidden;    
    zoom: 1;/*清除浮动,解决浮动后出现的缝隙*/
}
.img1,.about-footer-text{
    float: left;
    width: 25%;
    height: 395px;
}
/*需要设置图片宽度100%显示*/
.img1 img{
    width:100%;
}
.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    *zoom:1;
}
.about-footer-text{
    background-color: #07cbc9;
    line-height: 1.5em;
    position:relative;
}
.about-footer-text h3{
    color: #fff;
    font-size: 22px;
    margin: 20px;
}
.about-footer-text p{
    margin: 20px;
}
.about-footer-text  input,.about-footer-input{
    width: 100px;
    height: 40px;
    margin:0 auto ;
    /*background-color: red;*/
}
.about-footer-text  input{
    background-color: #000;
    border:0;
    color: #fff;
}
.about-footer-text  input:hover{
    /*background-color: rgb(0,0,0,0.2);*/
    /*鼠标经过背景色全透明*/
    background:transparent;
    cursor: pointer;
    border: 1px solid #000;
}
.about-footer-input{
    padding-top: 20px;
}
.about-p1{
    color: #F7F2EA;
}
.about-p2{
    color: #DDD;
}
/*使用伪元素实现三角形，保证在不同分辨率的电脑下，三角与文字区域不会分离*/
.triangle1::before{
    content:"";
    width:0;
    height:0;
    border-width: 12px 22px 12px 2px;   
    border-style: solid;
    border-color: transparent #07cbc9 transparent transparent;
    position: absolute;
    top:186px;
    left:-24px;
}
.triangle2::after{
    content:"";
    width:0;
    height:0;
    border-width: 12px 2px 12px 22px;
    border-style: solid;
    border-color: transparent transparent transparent #07cbc9;
    position: absolute;
    top:186px;
    right:-24px;
}
/*.triangle3{
    width:0;
    height:0;
    border-width: 12px 2px 12px 22px;
    border-style: solid;
    border-color: transparent transparent transparent #07cbc9;
    position: absolute;
    top:578px;
    left:380px;
}
.triangle4{
    width:0;
    height:0;
    border-width: 12px 2px 12px 22px;
    border-style: solid;
    border-color: transparent transparent transparent #07cbc9;
    position: absolute;
    top:578px;
    right:356px;
}*/
.gallery{
    width: 100%;
    background-color: pink;
    /*清除浮动对自己的影响*/
    clear:both;
}

收起回答

樱桃小胖子 2019-06-25 19:08:17

建议同学尝试设置如下尝试一下：

希望可以帮到你！

收起回答

提问者 _TonyStark #1

老师你好，我试过了，不行。直接给gallery定义就行还是配合清除浮动一起使用？我删掉清除浮动，直接定义的

2019-06-25 20:48:57
樱桃小胖子回复提问者 _TonyStark #2

清除浮动gallery依然显示在上方是因为同学给about设置的高度过低导致的，建议去掉about设置的高度，让内容自动撑开高度即可，另外，布局上和css代码还有一些不太合理，老师也帮你进行了调整，具体看上面的代码和注释哦

2019-06-26 11:17:56