我这样做是因为我最终会在CSS中集成一些'@media'的东西。
我的基本思路是我有一个中央带(divMenuCenterContainer),它有两列(divMenuMiddleElement)。最终,divMenuMiddleElement将被叠放在另一个顶部,用于低@media屏幕宽度。麻烦是我还没有那么远。我无法得到基本的设计工作。
我想要的是divMenuCenterContainer居中在屏幕中间。在它的内部是两列,在这个阶段将并排排列。
故障:左边的浮动(divMenuBlankLeftRight)完全没有出现,当它没有它时(这是我想要的)。当我在其中放置字母'A'时,它只出现在两个主列上方的单独行上(而不是左侧)。
我想要什么:我要divMenuBlankLeftRight出现在左边没有任何东西。或者我想divMenuCenterContainer正确居中,而不需要divMenuBlankLeftRight。
OR:有没有更好的方法来做到这一点?我是否应该使用第n个孩子,如果有的话,我该如何得到这个工作,考虑到我需要两个中间居中的列(并且为了低宽度@media检查而最终堆叠在一起)?
这就是我所拥有的。
CSS:
* {
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* For IE 6/7 */
}
.divMenuContainer1
{
border: solid 1px black;
background: #0000FF;
}
.divMenuBlankLeftRight
{
float: left;
width: 19%;
background: #FF0000;
}
.divMenuCenterContainer
{
float: left;
width: 60%;
background: #00FF00;
text-align: center;
border: solid 1px black;
}
.divMenuMiddleElement
{
float: left;
width: 50%;
background: #00FF00;
}
HTML:
Left Hand Central Column
Right Hand Central Column
Left Hand Central Column 2
Right Hand Central Column 2
2015-07-21
Rewind