Html 使用浮动并排对齐div元素

我主要是一个后端开发人员，但我试图得到一个布局出来的权利。基本上，我正在创建一个列表视图页面，该页面左侧将包含一个

div

标记，该标记具有一系列过滤器（下拉列表、复选框等）。在屏幕的右侧，我将有一个包含网格的

div

标记。这似乎是工作，但看起来可怕时，我的头顶或当我的屏幕没有最大化。我这样做对吗？基本上这就是我想要的：

我为此所做的CSS非常简单：

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


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

基本上，

.filterContainer

是我左边的

div

（dLeft），而

.gridContainer

是我右边的

div

（dRight）。这对我想要实现的目标有效吗？结果如下所示：

但是，如果调整窗口大小，结果如下：

---

我想这是正常的，因为我正在调整大小，但是我的css有效吗？

如果您将左侧容器设置为固定宽度，这将有所帮助。如果愿意，您可以将这两个div包装到另一个div中，并在其中设置最大宽度。

如果您将左侧容器设置为固定宽度，则会有所帮助。如果愿意，您可以将这两个div包装到另一个div中，并在其中设置最大宽度。

首先，在处理基于网格的布局时，始终确保使用

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

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

注意：

*

只是一个将应用 为每个元素定义属性。为了达到特定的目标 元素，使用更具体的选择器，如

div.class\u name

等

现在，你为什么需要它？

如下图所示

CSS将

边距

、

填充

和

边框

添加到框外而非框内，这是默认的内容框行为，因此当您使用我共享的代码片段时，它会更改框模型行为，并使元素计算元素内的

边框

和

填充

---

<您的问题，您提供的CSS是完美的，但是<代码>位置<代码>，<代码>浮点，或者<代码>空白>代码>甚至未清除的浮动元素都会引起您所面临的问题，因此，如果可以，请考虑更改CSS样式表，如果使用<代码>框大小：边框；代码>

---

你是如何做到这一点的？

很明显，我不会向您提供全部内容，但只提供如何实现这一点的一般想法，因为我看到您使用的是

width:79%
现在，我有两个元素浮动到左边，盒子模型改变了，所以我不必对任何元素使用
-1%
宽度。当需要间距时，在网格内嵌套更多块，然后使用
padding
代替
margin
，尤其是在浮动的父元素上



* {
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
/*重置*/
保证金：0；
填充：0；
}
.包装：之后{
明确：两者皆有；
显示：表格；
内容：“；
}
.wrap>div{
最小高度：300px；
}
.包.左包{
宽度：30%；
浮动：左；
边框：3px实心#f00；
}
.wrap.好的{
边框：3倍实心#000；
宽度：70%；
浮动：左；
}
首先，在处理基于网格的布局时，始终确保使用

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

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

注意：
*
只是一个将应用
为每个元素定义属性。为了达到特定的目标
元素，使用更具体的选择器，如
div.class\u name
等

现在，你为什么需要它？

如下图所示


CSS将
边距
、
填充
和
边框
添加到框外而非框内，这是默认的内容框行为，因此当您使用我共享的代码片段时，它会更改框模型行为，并使元素计算元素内的
边框
和
填充


<您的问题，您提供的CSS是完美的，但是<代码>位置<代码>，<代码>浮点，或者<代码>空白>代码>甚至未清除的浮动元素都会引起您所面临的问题，因此，如果可以，请考虑更改CSS样式表，如果使用<代码>框大小：边框；代码>


你是如何做到这一点的？

很明显，我不会向您提供全部内容，但只提供如何实现这一点的一般想法，因为我看到您使用的是
width:79%
现在，我有两个元素浮动到左边，盒子模型改变了，所以我不必对任何元素使用
-1%
宽度。当需要间距时，在网格内嵌套更多块，然后使用
padding
代替
margin
，尤其是在浮动的父元素上



* {
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
/*重置*/
保证金：0；
填充：0；
}
.包装：之后{
明确：两者皆有；
显示：表格；
内容：“；
}
.wrap>div{
最小高度：300px；
}
.包.左包{
宽度：30%；
浮动：左；
边框：3px实心#f00；
}
.wrap.好的{
边框：3倍实心#000；
宽度：70%；
浮动：左；
}
也许您可以使用
位置：绝对

或者仅仅使用
表
标签来描述它的设计？这不像W3C计划在不久的将来放弃那个标签

这不是浮动块的正常行为，因为它们放置在任何正常块之前，并且不使用正常父块