Question

我希望leftcol和rightcol divs彼此相邻浮动。我该怎么做？

@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%;}

Answer 1

@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;

如何将divs彼此相邻？

1 个答案: