html – 使用浮点数并排对齐div元素

概述我主要是一个后端开发人员,但我正试图让布局正确.基本上我正在创建一个列表视图页面,左侧包含一个div标签,它有一堆过滤器(下拉列表,复选框等).在屏幕的右侧,我将有一个包含网格的div标签.这似乎有效,但是当我在头顶上或者我的屏幕没有达到最大值时看起来很糟糕.我这样做了吗？基本上这就是我所追求的： 我为此做的CSS就像这样简单： .filterContainer { width:20%; 我主要是一个后端开发人员,但我正试图让布局正确.基本上我正在创建一个列表视图页面,左侧包含一个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有效吗？

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

* {   -moz-Box-sizing: border-Box;   -webkit-Box-sizing: border-Box;   Box-sizing: border-Box;   /* resets */   margin: 0;   padding: 0;}

Note: * is nothing but a universal selector which will apply the
defined propertIEs to every element. Inorder to target specific
elements,use more specific selectors like div.class_name etc

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

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

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

对你的问题来说,你提供的CSS是完美的,但是位置,浮动或边距甚至未清除的浮动元素都可能导致你所面临的问题,所以如果可以的话,考虑改变你的CSS样式表,并且值得你使用Box-sizing：border-Box;

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

嗯,很明显,我不会提供你所有的东西,但只是一般的想法如何实现这一点,因为我看到你使用宽度：79％;现在这就是为什么我建议你改变盒子模型的非常有力的原因.

现在,我有两个元素浮动到左边,盒子模型改变了,所以我不必为任何元素使用-1％宽度.当您需要间距时,在网格内嵌入更多块,然后使用填充而不是边距使用填充,尤其是浮动父元素.

Demo

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

总结

以上是内存溢出为你收集整理的html – 使用浮点数并排对齐div元素全部内容，希望文章能够帮你解决html – 使用浮点数并排对齐div元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。