Home  >  Article  >  Web Front-end  >  Three divs are defined. How to make these three divs display on the same line? Why can't my css code below be implemented? _html/css_WEB-ITnose

Three divs are defined. How to make these three divs display on the same line? Why can't my css code below be implemented? _html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:49:221743browse






html5




        

            

                    

  •                 这里是第一个div里面的内容
                    

  •             

        

        

            

                    

  •             

        

        

            

                    
  • 这里是第三个div里面的内容

  •             

        





回复讨论(解决方案)


 
 

 
 html5
 
 div{
     width: 200px;
     height:100px;

 }
 #outDiv{
     width: 610px;
 }
 #oneDiv{
         border:1px solid black;
         float: left;
          
 }
 #twoDiv{
         border:1px solid red;
      float: left;
 }

 #threeDiv{
         border:1px solid blue;
         float: left;
 }

 
 
 
 
         
             


                     

  •                  这里是第一个div里面的内容
                    

  •              

         

         
             

                     
                 

         

         
             

                     
  • 这里是第三个div里面的内容

  •              

         

 


 
  

为啥要设置outDiv的宽度?好像外部div的宽高会被内部div的内容会自动撑满的吧?!

 #outDiv{
     width: 610px;
 }

为啥要设置outDiv的宽度?好像外部div的宽高会被内部div的内容会自动撑满的吧?!

 #outDiv{
     width: 610px;
 }


div{width: 200px; height:100px;}把所有的div都设置了, 包括outDiv

float: left;只是设置如何浮动,又不是强制限制显示在同一行,当父容器宽度不够时会显示在下一行

只有单个元素的宽度超过父容器,父容器才会被撑开
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:How HTML web pages automatically adapt to mobile phone screens_html/css_WEB-ITnoseNext article:How HTML web pages automatically adapt to mobile phone screens_html/css_WEB-ITnose

Related articles

See more