How to put div elements side by side?
Question
I've been trying all day to get the "nav" and "body" divs to sit side by side, but it seems like i'm locked to the width of the nav-bar somehow. I can't for the life of me get them to float next to each other, they only stack... more specifically, i'm trying to put the body div in the middle of the view port, any ideas? thanks in advance for any help!
<!Doctype HTML> <HTML lang="en"> <head> <meta charset="utf-8"> <title>Dirt Road Magazine - What's YOUR Adventure? - (dirtroad.com)</title> <link href="stylesheeet.css" rel="stylesheet" type="text/css"> <style> body { background-image: url("back.gif"); background-color: #c0c0c0; width: 100%; height: 100%; } #nav { padding: 1%; padding-left: 0; padding-top: 0; } .navbutton { cursor: pointer; background-color: #d0d0d0; color: #4040c0; width: 100%; height: 100%; } a { cursor: pointer; } #slogan { padding-top: 0; padding-bottom: 1%; padding-left: .5%; } #logo {} #body {} .outline { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } #main {} </style> <script> </script> </head> <body> <div text-align="center" id="logo"> <A id="logo" HREF="http://www.dirtroadmagazine.com"> <IMG SRC="http://dirtroadmagazine.com/IMGS/drmlogo.gif" border="0"> </A><br> <font face="impact" color="yellow" size="6"> <div id="slogan"> <p1 class="outline"> What's YOUR adventure? </font> </p1> </div> </div> <div id="main"> <div id="nav" align="left"> <table id="navtab" cellspacing=0 cellpadding=0 border=0> <tr align=left valign=top> <td width=120> <center> <table width=120 cellspacing=0 cellpadding=0 border=0> <tr align=center valign=top> <td> <a class="navlink" id="side1" href="http://www.dirtroadmagazine.com/"><button class="navbutton" style="float: left;">DirtRoad Home</button></a><br> <a class="navlink" id="side2" href="http://www.dirtroadmagazine.com/about.htm"><button class="navbutton" style="float: left;">About Us</button></a><br> <a class="navlink" id="side3" href="http://www.dirtroadmagazine.com/list.html"><button class="navbutton" style="float: left;">Content list</button></a><br> <br> <br> <br> <a class="navlink" id="side4" href="http://www.dirtroadmagazine.com/copyrite.htm">© 1996-2018 DRM</a><br> <font face=arial size=1> <a class="navlink" href=http://www.dirtroadmagazine.com alt="It's A JEEP Thing, And WE Understand! Visit Dirt Road Magazine Today - Check Out Our Jeep Parts Reviews!">Welcome To The World's Favorite Jeep Enthusiast Site! It's A JEEP Thing!</a><br> </td> </table> </div> <div id="body"> <font face="impact" color="yellow" size="6"> <p1 class="outline"> We're back! </font> </p1> <br> <br> <font face="impact" color="black" size="4"> <p1> Want to know where WE'VE been? Click <a href="article.html">here</a> to find out! </font> </p1> </div> </div> </body> </html>
1 answers
solution1
1 2019-12-24 20:54:55
使用 flex-box 解决这个问题首先在包含 div 和导航栏的父元素上设置 display:flex 和 flex:row 然后在子元素上使用 flex 数字，如 flex:1 或 flex:2 最大数字 flex 占用最大可用空间。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Put elements side by side
How to put two div and image side by side
How to center two div put side by side
how to align elements side by side in a div?
How to position a set of div elements side by side?
Place div elements side by side
Align <div> elements side by side
Have div elements side by side
How to put text side by side with image inside div?
How to put a button on the right side of a div
Related Tags