对此有所了解并尝试制作附加布局。 Box Layout
我似乎无法在中间部分显示最后一排4个框。一旦我这样做，我将调整所有周围的宽度和高度，使其美观和干净。我看上线，看起来我已经正确地清理了所有内容，我认为这与“boxstyle”类被错误地应用有关，因为我已经使用google开发工具了。你能提供的任何帮助都会令人惊叹。
这是我的html：
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/reset.css">
<link type="text/css" rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
<title>Layout Challenge</title>
<meta name="description" content="Layout Challenge"/>
<meta name="keywords" content="layout, challenge, classwork"/>
<meta name="author" content="Chantel Zapata"/>
</head>
<body>
<header class="marketnavrow1">
<div class="marketnavrow1a boxstyle">
</div>
<nav class="marketnavrow1b">
<ul>
<li class="boxstyle"></li>
<li class="boxstyle"></li>
<li class="boxstyle"></li>
<li class="boxstyle"></li>
</ul>
</nav>
</header>
<div class="magazine">
<aside class="boxstyle"></aside>
<div class="secondary">
<div class="mag1strowbox boxstyle">
</div>
<div class="mag2ndrowbox">
<div class="mag2ndrowbox1 boxstyle">
</div>
<div class="mag2ndrowbox2 boxstyle">
</div>
</div>
<div class="mag3rdrowbox">
<div class="4colrow boxstyle"></div>
<div class="4colrow boxstyle"></div>
<div class="4colrow boxstyle"></div>
<div class="4colrow last"></div>
</div>
</div>
</div>
和我的css：
* {
box-sizing: border-box;
}
body {
margin: 0 auto;
width: 1090px;
}
.indextext {
margin-top: 60px;
font-family: "Arial", Verdana, san serif;
}
.boxstyle {
border-width: 1px;
border-style: solid;
border-color: #969696;
background-color: #d7d7d7;
}
.tcbox1 {
height: 164px;
margin-top: 40px;
clear: both;
width: 1090px;
}
.tcbox2 {
margin-top: 20px;
overflow: hidden;
clear: both;
}
.tcbox2a {
height: 450px;
width: 735px;
float: left;
}
.tcbox2b {
height: 450px;
width: 335px;
float: right;
}
.tcbox3 {
clear: both;
height: 164px;
margin-top: 20px;
margin-bottom: 40px;
width: 1090px;
}
.threecbox2 {
margin-top: 20px;
overflow: hidden;
clear: both;
}
.threecbox2a {
height: 450px;
width: 206px;
float: left;
}
.threecbox2b {
height: 450px;
width: 638px;
float: left;
margin-left: 20px;
}
.threecbox2c {
height: 450px;
width: 206px;
float: right;
}
.smpmrketrow2 {
margin-top: 20px;
overflow: hidden;
clear: both;
}
.smpmrketrow2a {
height: 450px;
width: 535px;
float: left;
}
.smpmrketrow2b {
height: 450px;
width: 535px;
float: right;
}
.smpmrketrow3 {
margin-top: 20px;
overflow: hidden;
clear: both;
}
.smpmrketrow3a {
height: 220px;
width: 350px;
float: left;
}
.smpmrketrow3b {
height: 220px;
width: 350px;
float: left;
margin-left: 20px;
}
.smpmrketrow3c {
height: 220px;
width: 350px;
float: right;
}
.marketnavrow1 {
margin-top: 40px;
overflow: hidden;
clear: both;
}
.marketnavrow1a {
height: 124px;
width: 264px;
float: left;
}
.marketnavrow1b {
float: right;
margin-top: 20px;
}
header nav {
height: 90px;
width: 704px;
float: right;
}
header nav ul {
list-style: none;
}
header nav ul li {
margin-left: 15px;
width: 140px;
height: 50px;
display: inline-block;
float: right;
}
.marketnavrow2 {
height: 450px;
width: 1090px;
margin-top: 20px;
margin-bottom: 20px;
float: right;
clear: both;
}
.magazine {
margin-top: 20px;
margin-bottom: 20px;
clear: both;
overflow: hidden;
}
aside {
height: 240px;
width: 264px;
float: left;
margin-right: 20px;
}
.secondary {
float: right;
}
.mag1strowbox {
width: 480px;
height: 150px;
margin-bottom: 20px;
}
.mag2ndrowbox {
overflow: hidden;
margin-bottom: 20px;
}
.mag2ndrowbox .mag2ndrowbox1 {
float: left;
width: 355px;
height: 200px;
margin-right: 20px;
}
.mag2ndrowbox .mag2ndrowbox2 {
float: left;
width: 105px;
height: 200px;
}
.mag3rdrowbox {
overflow: hidden;
clear: both;
}
.mag3rdrowbox .4colrow {
float: left;
width: 105px;
height: 100px;
margin-right: 20px;
}
.mag3rdrowbox .4colrow .last {
margin-right: 0;
}