在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属性。

班级是为团体。 ID是针对个别元素的。

您可以在这里查看简化的demo。 我会建议寻找到柔性盒CSS。你将不得不重做你的css ，但它是未来的准备，并给你很大的灵活性。