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
Release: 2016-06-24 11:49:22
Original
1757 people have browsed it






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;只是设置如何浮动,又不是强制限制显示在同一行,当父容器宽度不够时会显示在下一行

只有单个元素的宽度超过父容器,父容器才会被撑开
Related labels:
source:php.cn
Previous article:How HTML web pages automatically adapt to mobile phone screens_html/css_WEB-ITnose Next article:Discussion: The difference between browser mode and document mode in IE browser_html/css_WEB-ITnose
Statement of this Website
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
Latest Articles by Author
Latest Issues
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template