Home  >  Article  >  Web Front-end  >  Let two DIVs display side by side_html/css_WEB-ITnose

Let two DIVs display side by side_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:51:171696browse

一、使用display的inline属性

Html代码  

  1. 0d2b771c75fa04da175af657a08a86e0AAAA16b28748ea4df4d9c2150843fecfba68   
  2. 0d2b771c75fa04da175af657a08a86e0BBBB16b28748ea4df4d9c2150843fecfba68  

 

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代码  

  1. c9ccee2e6ea535a969eb3f532ad9fe89  
  2. #left,#right   {float:left;border:1px   solid   red;   padding:10px;}  
  3. 531ac245ce3e4fe3d50054a55f265927  
  4. ae41745cc86a0b5fb65368d61eec6c5f  
  5.     fcd582c391d7e4baebd94759ddab1da0 1111 16b28748ea4df4d9c2150843fecfba68  
  6.     9db10225cb47fa67b76257c4afa98558 2222 0c6dc11e160d3b678d68754cc175188a 2222 0c6dc11e160d3b678d68754cc175188a 2222 16b28748ea4df4d9c2150843fecfba68  
  7.     491d0413bd5f707e2cd6678e87774254  
  8.     a505f91d67dd6c872dd916c30ce9027916b28748ea4df4d9c2150843fecfba68  
  9.  16b28748ea4df4d9c2150843fecfba68   

 

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代码  

  1. c9ccee2e6ea535a969eb3f532ad9fe89  
  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. 531ac245ce3e4fe3d50054a55f265927  
  7. c36fa6f5762f7bafa55e37dd53e22431left16b28748ea4df4d9c2150843fecfba68  
  8. 49a1179c38f42ce51d91de78eafc3198right16b28748ea4df4d9c2150843fecfba68  

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

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

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

Html代码  

  1. 46d5fe1c7617e3914f214aaf043f4ccf  
  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. 531ac245ce3e4fe3d50054a55f265927  
  7.   
  8. c36fa6f5762f7bafa55e37dd53e2243116b28748ea4df4d9c2150843fecfba68  
  9. ec9e539b02335acbbfd5a90c9acede6816b28748ea4df4d9c2150843fecfba68

4. The code is as follows. Method 3 may not meet the requirements of the question, but it can achieve the same page effect. Mainly using the float attribute of div.

Html code

    1. c9ccee2e6ea535a969eb3f532ad9fe89
    2. body{ margin:0; height:100%}
    3. html{ height:100%} /*firefox compatible div height 100%*/
    4. #left{ width:200px; height:100%; float:left}
    5. #main{ width:100%; height:100%;
    6. 531ac245ce3e4fe3d50054a55f265927
    7. 243a8f3f087936dc3f96e2f0cf018c22 div id="left">left16b28748ea4df4d9c2150843fecfba68
    8. Right
    9. 16b28748ea4df4d9c2150843fecfba68 🎜>
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