使用浮动并排对齐div元素

Question

我主要是一个后端开发人员,但我正试图让布局正确.基本上我正在创建一个列表视图页面,它将div在左侧包含一个标签,其中包含一堆过滤器(下拉列表,复选框等).在屏幕的右侧,我将有一个div包含网格的标签.这似乎有效,但是当我在头顶上或者我的屏幕没有达到最大值时看起来很糟糕.我这样做了吗？基本上这就是我所追求的:

我为此做的CSS就像这样简单:

.filterContainer {
    width:20%; 
    float:left;
}


.gridContainer {
    width:79%; 
    float:right;
}

基本上.filterContainer是我的左div(dLeft),.gridContainer是我的权利div(dRight).这对我想要实现的目标有效吗？结果如下所示:

http://i.imgur.com/WFasMF1.png

但是,如果我调整窗口大小,我最终会得到以下结果:

http://i.imgur.com/4u9HRlK.png

我认为这是正常的,因为我正在调整大小,但我的CSS是否有效？

Answer 1

首先,当您处理基于网格的布局时,请务必确保使用

* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;

   /* Resets */
   margin: 0;
   padding: 0;
}

注意:*只是一个通用选择器,它将定义的属性应用于每个元素.为了定位特定元素,请使用更具体的选择器div.class_name等

现在,你为什么需要那个？

如果你在下面的图表中看到..

CSS增加margin,padding以及border盒子,里面没有,这是默认的内容框行为,所以当你使用我分享的片段,它改变了盒模型的行为,使元素计数外面border和padding里面的元素.

来到您的问题,您所提供的CSS是完美的,但是position,float或者margin甚至未清除的浮动元素任何事情都可能导致你所面对的,所以如果你可以考虑改变你的CSS样式表,并且将是值得如果你使用的问题box-sizing: border-box;

你是如何实现这一目标的？

嗯,很明显,我不会提供你所有的东西,但只是一个关于如何实现这一点的一般概念,因为我看到你width: 79%;现在正在使用这是我之所以建议你改变盒子模型的非常有力的理由.

现在,我有两个元素浮动到左边,盒子模型改变了,所以我不必使用-1% width任何元素.当你需要的间距,在网格内嵌套多个块,然后,而不是margin使用padding特别是浮父元素.

演示

<div class="wrap">
    <div class="left_wrap"></div>
    <div class="right_wrap"></div>
</div>

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    /* Resets */
    margin: 0;
    padding: 0;
}

.wrap:after {
    clear: both;
    display: table;
    content: "";
}

.wrap > div {
    min-height: 300px;
}

.wrap .left_wrap {
    width: 30%;
    float: left;
    border: 3px solid #f00;
}

.wrap .right_wrap {
    border: 3px solid #000;
    width: 70%;
    float: left;
}