html div包含表格,Html中的Div表格 - 包括明确的浮动问题

我这样做是因为我最终会在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：

A

Left Hand Central Column

Right Hand Central Column

A

Left Hand Central Column 2

Right Hand Central Column 2

2015-07-21

Rewind