如何將浮動div彼此相鄰？

-1

我想leftcol和rightcol divs相互浮動。我怎麼做？如何將浮動div彼此相鄰？

@charset "utf-8"; 
/* CSS Document */ 
#container{width:100%; height:1000px; margin:auto; background-color:#00ffff;} 
#header{width:95%; height:80px; margin:auto; margin-top:50px;} 

#logo{width:10%; height:50px; margin-top:10px; margin-left:20px; float:left;} 

#navbar{width:60%; height:50px; margin-top:10px; margin-right:10px; float:right;} 

#maincontent{width:95%; height:70%; margin:auto; margin-top:15px;} 

#leftcol{width:14%; height:30%; margin-left:15px; margin-top:20px; position:fixed;} 

#rightcol{width:40%; height:30%;}

來源

2014-12-25 JonMo

你也有一些HTML與此CSS代碼去？ – Joeytje50

http://stackoverflow.com/questions/18344904/how-to-align-two-divs-side-by-side-using-the-float-clear-and-overflow-elements?answertab=active#tab-top – Avijit

@charset "utf-8"; 
 
/* CSS Document */ 
 
#container{width:100%; height:1000px; margin:auto; background-color:#00ffff;border:1px solid black;} 
 
#header{width:95%; height:80px; margin:auto; margin-top:50px;border:1px solid black;} 
 

 
#logo{width:10%; height:50px; margin-top:10px; margin-left:20px; float:left;border:1px solid black;} 
 

 
#navbar{width:80%; height:50px; margin-top:10px; margin-right:10px; float:right;border:1px solid black;} 
 

 
#maincontent{width:95%; height:70%; margin:auto; margin-top:15px;border:1px solid black;} 
 

 
#leftcol{width:14%; height:30%; margin-left:15px; margin-top:20px;border:1px solid black;display:inline-block;} 
 

 
#rightcol{width:80%; height:30%;border:1px solid black;display:inline-block;}

<html> 
 
    <head></head> 
 
    <body> 
 
    <div id="container"> 
 
    <div id="header"> 
 
     <div id="logo"> 
 
     #LOGO 
 
     </div> 
 
     <div id="navbar"> 
 
     #NAVBAR 
 
     </div> 
 
    </div> 
 
    <div id="maincontent"> 
 
     
 
     <div id="leftcol"> 
 
     #leftcol 
 
     </div> 
 
     <div id="rightcol"> 
 
     #rightcol 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </body> 
 
</html>

添加到您的DIV + CSS代碼，就會使DIV的排列

display:inline-block;

來源

2014-12-25 15:25:12

剛試過。它沒有工作。我在leftcol和rightcol div中放置了display：inline-block。 – JonMo

是的，但你必須刪除位置：固定;從leftcol或divs不會對齊！觀看演示播放代碼snipet –

我在瀏覽器預覽中做了它，它工作。非常感謝。題。我之前使用過Dreamweaver中的設計視圖。這就是爲什麼它不能正常工作？我在Dreamweaver中使用了實時視圖，並且它正常工作。 – JonMo

如何將浮動div彼此相鄰？

回答

相關問題