今天没事复习一下div，每次开始的时候我都说不能迷，清醒的一次性写完，但是到最后总是会出错，粗心。
然后在大div里面写4个小div的时候他们都是一行一行的，在style里面加了float，结果就是一左一右、一左一右。反正就是不会在同一层上出现。
最后找到了可以div并排了，忘了在哪个地方看到了 - -
<html>
<head>
<title>一种3个DIV并排在一行的方法</title>
<style type="text/css">
#bottom {
margin:0 auto;
width:300px;
}
#bottom div {
width:100px;
}
#d1 {
float:left;
background:#f00;
}
#d2 {
float:right;
background:#0f0;
}
#d3 {
float:right;
background:#00f;
}
</style>
</head>
<body>
<div id="bottom"><div id="d3">d3</div><div id="d1">d1</div><div
id="d2">d2</div></div>
</body>
</html>
是这样的，然后我加了d4，终于解决了，平时不用功，临时找度娘。。。
希望我赶紧做好吧，赶紧思维有进步吧，
分享到：
相关推荐
两个div并排的实现代码，一般在使用过程中，最好外面再包括一个用来定位居中显示。这里主要是了解下css的左右浮动布局给开始学习css的朋友。
让两个Div并排显示的方法有很多，使用display的inline属性、通过设置float来让Div并排显示都可以实现，感兴趣的朋友可以参考下本
Dreamweaver中div标签怎么设置左右并排？Dreamweaver中div标签默认是上下并排的，想要设置成左右并排，该怎么设置呢？下面我们就来看看详细的教程，需要的朋友可以参考下
两个div并排一行情况也是很常见的，下面有个示例可以实现，大家可以参考下
DIV＋CSS＋HTML布局（三行两列布局）
如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。 div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; } <div id="div1"></div> 效果...
一种5个DIV并排在一行的方法
代码分享给大家，你可以自己变通。提示要注意两点：1、DIV宽高的定义。2、DIV在 IE6 中默认是有高度的。 上图右边是我们要实现的效果，代码如下： 复制代码代码如下:<div id=”box”></div> <p><style type=”...
见过Ext的panel滑动隐藏效果（点击panel右上角小三角图标实现的那个效果）吗，该功能是通过深入解读Ext源码后，实现的div滑动隐藏效果，代码简洁，极为经典，方便追求效果的前台爱好者们研究。 想要的快来下，5分...
一、使用css float并排显示 二、使用css display同行显示 我们加入display:inline即可解决实现同行并排显示div盒子对象。对同行所有div标签设置div{ display:inline}样式
NULL 博文链接：https://huangdonghui.iteye.com/blog/586834
主要介绍了两个div在同一行，两个div不换行的两种实现方法，有不知道的朋友可以参考下
一、并排在一行的两个div样式有这种情况：ie或者ff下对于子div设置float左的时候，如果另外的子div没有设置float左的话，两个浏览器下会有区别，具体有一个会产生间隙。兼容做法就是都设置float属性。但是记住有...
在网上找了一下，发现很多都是转载以下代码版本的，但是发现这个代码只能文本居中，table、图片是不行的； 复制代码代码如下: <div xss=removed> <div xss=removed>居中</...这样写的话，里面的table和div都可以居中
下面是我翻译的内容，是根据我对文章的理解意译的，你就别挑哪里翻译的不对了，我的目的只是传达这个CSS技巧 许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格...
前言 有时候，我们需要如下图... <div id=b>我要浮出去！</div> </div> #a{ width:400px; height:100px; background:rgb(0, 0, 0); position:relative;/*父元素>相对定位*/ } #b{ width: 150px; height:50px;