Question

我整天都在尝试让“导航”和“身体”的div并排放置，但似乎我被某种方式锁定在导航栏的宽度上。我无法终生让它们彼此漂浮，它们只能堆叠在一起... 更具体地说，我正在尝试将body div放在视口的中间，有什么想法吗？预先感谢您的帮助！

<!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>

Answer 1

使用flex-box克服此问题首先在同时包含div和navbar的父元素上设置display：flex和flex：row，然后在子元素（例如flex：1或flex：2）上使用flex数字，flex的最大数字将占用最大可用空间。

如何将div元素并排放置？

1 个答案: