php - Wordpress 模板中框的 CSS 网格

Question

我敢肯定，我忘记的只是一些简单的事情，但是在这个特定的网站上工作了一整晚，我倾向于向你屈服于高超的智慧。

我正在尝试为 Wordpress 主题构建一个框网格 (div)，虽然我对前两行没有问题，但第三行不会按应有的方式排列(底部宽度下方 18px ，三个排成一行)。

http://jsfiddle.net/XSGmf/就是它的全部所在。

#innercontent {
background-color: #FFF;
width: 920px;
display:inline-block;
margin-left:18px;
font-family:Arial, Helvetica, sans-serif;
}
#innercontent p {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
padding-left:10px;
padding-right:10px;
 }
#pageimage {
height: 20px;
width: 920px;
margin-left:18px;
background-color:#000;
display:inline-block;
 }
#cta1 {
height: 292px;
width: 606px;
margin-left:18px;
background-color: #00A850;
float: left;
vertical-align:top;
display:inline-block;
position:relative; }
 #cta2 {
background-color: #00A850;
float: right;
height: 292px;
width: 292px;
margin-right:18px;
vertical-align:top;
position:relative;
display:inline-block; }

#cta3 {
height: 292px;
width: 606px;
margin-left:18px;
margin-top: 18px;
margin-right: 22px;
margin-bottom:18px;
background-color: #00A850;
float: left;
display:inline-block;
position:relative; }
#cta4 {
background-color: #00A850;
float: right;
margin-top:18px;
margin-right:18px;
height: 292px;
width: 292px;
position:relative;
display:inline-block; }
#cta5 {
height: 292px;
width: 292px;
margin-left:18px;
margin-top: 18px;
margin-bottom:18px;
background-color: #00A850;
float: left;
display:inline-block; }
#cta6 {
height: 292px;
width: 292px;
margin-left:22px;
background-color: #00A850;
vertical-align:top;
display:inline-block;
position:relative; }
#cta7 {
height: 292px;
width: 292px;
float:right;
margin-right:18px;
background-color: #00A850;
vertical-align:top;
display:inline-block;
position:relative; }
#ctamidtop {
height: 146px;
width: 292px;
position:relative;
text-align:center;
display:inline-block; }
.ctamidtop a {
font-family:"Arial Black", Gadget, Arial, sans-serif;
color:#FFF;
text-align:center;
font-size:26px;
padding-top:10px;
text-decoration:none; }
#ctawidetop {
height: 146px;
width: 606px;
position:relative;
text-align:center;
display:inline-block; }
.ctawidetop a {
font-family:"Arial Black", Gadget, Arial, sans-serif;
color:#FFF;
text-align:center;
font-size:26px;
padding-top:10px;
text-decoration:none; }

#ctasmalltop {
height: 146px;
width: 292px;
font-family:"Arial Black", Gadget, Arial, sans-serif;
color:#FFF;
text-align:center;
position:relative;
display:inline-block; }
.ctasmalltop a {
font-family:"Arial Black", Gadget, Arial, sans-serif;
color:#FFF;
text-align:center;
font-size:22px;
text-decoration:none; }
#frontimage img {
position:relative;
display:inline-block;
float:left;
width:606px; }
#titlebar {
background-color: #17A752;
height: 50px;
width: 920px;
vertical-align:top;
display:inline-block;
margin-left:18px;
font-family:"Arial Black", Gadget, Arial, sans-serif;
font-size:20px;
color:#FFF;
text-align:center; }
#titlebar span{
font-family:"Arial Black", Gadget, Arial, sans-serif;
font-size: 36px;
color:#FFF;
text-align:center;
margin-top:0px;
display:block; }
#mainframe {
background-color: #000;
width: 956px;
margin-left:2px; 
    display:inline-block;
position:relative; }

在正确方向上的任何帮助或插入将不胜感激。

Answer 1

您必须清理您的 CSS。如果你想要一个纯 css 的网格，你需要为所有 div 元素固定所有高度。

.mainframe > div{
    display:inline-block;
    max-height:292px;
    max-width:292px;
    border:1px;
    background:Red;
    margin:10px
}

请注意，我将 DIV 作为一个组来定位。您当前的标记没有使用 HTML 和 CSS 属性。

类(class)是给团体的。 ID 用于单个元素。

您可以查看简化的 demo这里。我建议研究 flex-box CSS。你将不得不返工你的CSS但它已为 future 做好准备，并为您提供了很大的灵 active 。