首页

如何用CSS实现两个DIV并排，且第一个居中？

就是一个DIV跟在一个居中DIV的后面。。

2024年11月22日 09:44

有5个网友回答

网友（1）：

有很多种实现方法，下面是用最简单的方法实现的，

思路，2个div用一个div包起来，然后让两个div浮动。然后给外面的父级进行定位。仅供参考。


            * {margin:0px; padding:0px;}
			.box {position:absolute; top:50%; left:50%; width:200px; height:100px; margin-left:-50px; margin-top:-50px;}
			.div1 {width:100px; height:100px; background:#ccc; float:left;}

网友（2）：


	
      
      	这里是第二个DIV(靠右的).

这里是第一个DIV(居中的)

布局原理是:
    在CSS2中, 绝对定位(position:absolute)的元素在没有定义top与left等位置偏移属性时,会处理正常的文档流的默认位置.也就是保持原位置不变.
    同时, 当有定义top与left等位置偏移属性时, 偏移则是相对父级绝对定位元素而言的, 如果没有父级绝对定位元素, 则取文档(document)左上角为基点.
    所以我使用了两个绝对定位的元素包位了"第二个DIV", 用意就是辅助定位使用.

网友（3）：





无标题文档







    Div1

    Div2

如果能帮到你，望采纳!

网友（4）：

楼上、楼下的方法，也都可以实现，每个人的方法不同，我的是这种。如果，不把第二个层，放在第一个层里面，相对定位，没有可参照物，当然还可以在2个层的外面再套一层，这样里面两个层可以用float: left; display:inline;但是，里面第一个层就不是在剧中，而是整个外层在剧中。外层用：margin:0 auto; position: relative;


  .div1 {
  margin:0px auto; /* 居中 */
  width:200px;
  height: 100px;
  POSITION: relative;
  border: 1px solid #ff0; 
  display:block; 
 }
 .div2 {
  width:200px;
  height: 100px;
  border: 1px solid #0f0;
  left: 200px;
  POSITION: absolute;
  display:block; 
 }

网友（5）：