suchen

Heim >Web-Frontend >HTML-Tutorial >让两个DIV并排显示_html/css_WEB-ITnose

让两个DIV并排显示_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:51:171716Durchsuche

一、使用display的inline属性

Html代码  

  1. AAAA
      
  2. BBBB
      

 

1 <div style="width:300px; height:auto; float:left; display:inline">AAAA</div>   2 <div style="width:300px; height:auto; float:left; display:inline">BBBB</div>

 

 

 

二、通过设置float来让Div并排显示

Html代码  

  2. #left,#right   {float:left;border:1px   solid   red;   padding:10px;}  
  3.   
  4.   
  5.     
     1111 
      
  6.     
     2222 
     2222 
     2222 
      
  7.       
  8.     
      
  9.  
   

 

1 <style>  2 #left,#right   {float:left;border:1px   solid   red;   padding:10px;}  3 </style>  4 <div   id= "main ">  5     <div   id= "left "> 1111 </div>  6     <div   id= "right "> 2222 <br> 2222 <br> 2222 </div>  7     <!-- 如果不用clear?性可能?出???器不兼容??,clear??元素周??有浮?元素 -->  8     <div   style="clear:both"></div>  9  </div>

 

 

 

 

三、对于两个div并排，左边为绝对宽度，右边为相对宽度的，需要用到这种布局的情况比较多见，如左边为导航，右边为内容的页面

    1、将最大的容器padding-left固定宽度，左边的固定宽度的一块position:absolute，然后right的一块width为百分百

    2、 使用position:absolute。代码如下。

Html代码  

  2. body{ margin:0; height:100%}  
  3. html{ height:100%} /*兼容firefox的div高度100%*/  
  4. #left{ position:absolute; top:0; left:0; width:200px; height:100%;  
  5. #right{ margin-left:200px; height:100%;  
  6.   
  7. left
      
  8. right
      

  这段代码主要涉及到以下两点点比较重要的：

 （1）兼容firefox实现div高度100%；
 （2）div绝对定位的妙用；在页面布局的时候，position:absolute如果灵活的应用，可以达到很好的效果。

  3、 使用float解决div左右布局，左为绝对宽度，右为相对宽度问题

Html代码  

  2. body{ margin:0; height:100% }  
  3. html{ height:100% }  
  4. #left{ width:150px; height:100%; float:left; _margin-right:-3px; yellow }  
  5. #main{ height:100%; green }  
  6.   
  7.   
  8.   
  9.   

 4、代码如下。方法3可能没有按照题目要求，但是可以达到一样的页面效果。主要是使用了div的float属性。

Html代码  

    2. body{ margin:0; height:100%}  
    3. html{ height:100%} /*兼容firefox的div高度100%*/  
    4. #left{ width:200px; height:100%;  float:left}  
    5. #main{ width:100%; height:100%;  
    6.   
    7.   
    8. left
        
    9. Right  
  

 

 
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：如何让网页在浏览器标题栏显示自己制作的图标ico_html/css_WEB-ITnoseNächster Artikel：web前端开发的浏览器兼容性（持续更新）_html/css_WEB-ITnose

In Verbindung stehende Artikel

Mehr sehen