html 如何使用css实现两个div同一行显示呢?


摘要:
下文讲述将div放入同一行显示的方法分享,如下所示:

在网页的布局中,我们经常需要将div处于同一行显示,下文讲述三种实现div底端对齐的方式,如下所示:

方法1:
1.1设置父级合适的高度
1.2设置元素的float属性
1.3清除元素的float属性
方法2:
1.1设置父级overflow:hidden 清除元素浮动
1.2设置子元素的float属性

例:

  <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="">
  <title>猫猫教程(www.maomao365.com)
  ---设置两个div同一行对齐显示的方法分享
  </title>
 </head>
 <body>
  
   <p>猫猫教程--div同一行显示两种方法分享:</p>
   <p>
   div同一行--方式1:
   </p>
   
    <div id="maomao1" style="width:300px;height:32px;border:1px solid black">  

       <div id="maomao1_1" style="width:120px;height:30px;float:left;border:1px solid red">猫猫教程--div1</div>
       <div id="maomao1_2" style="width:120px;height:30px;float:left;border:1px solid blue">猫猫教程--div2</div>

   </div>


   <p>
   div同一行--方式2:
   </p>
  
       <div id="maomao2" style="width:300px;overflow:hidden;border:1px solid black">  
           <div id="maomao2_1" style="width:120px;height:30px;float:left;border:1px solid red">猫猫教程--div1</div>
           <div id="maomao2_2" style="width:120px;height:30px;float:left;border:1px solid blue">猫猫教程--div2</div>
       </div>

 
 </body>
</html>
html css 两个div显示同一行的方法分享

html css 两个div显示同一行的方法分享