使用浮动并排对齐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，特别是浮动的父元素。

Demo

<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;
}

Answer 2

如果你使左侧容器固定宽度有帮助。你可以随时将这些div包装在另一个div中，如果你愿意，可以设置一个最大宽度。

Answer 3

也许你可以使用position:absolute？

或者只使用table标记来设计它的内容？它不像W3C计划在不久的将来丢弃该标签。

这不是浮动块的正常行为，因为它们放在任何普通块之前，而不是使用普通的父容器上下文。

Answer 4

您可以使用Frameset将页面划分为多个帧，然后将css添加到样式中。