菜单div并排到div

Question

有许多引用并排设置div，但没有一个回答我的问题，而且我在解决这个问题的尝试中读了很多。

A＆＃34; nav-body＆＃34; div包含另外两个div：一个菜单div应该在nav-body div的左侧，一个＆＃34;内容＆＃34;应该在nav-body中间水平的div。菜单div位于导航体div的左侧，但内容div始终显示为水平居中，但低于最后一个菜单项。我希望菜单和内容div与以nav-body div为中心的内容div并排放置。

＆＃13;

＆＃13;

  #nav-body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #336699;
    display: inline-block;
    height: auto;
    width: 100%;
    vertical-align: top;
    overflow: hidden;
  }
  #menu {
    margin: 0;
    padding: 0;
    width: 12em;
    background-color: #336699;
    list-style-image: none;
    list-style-type: none;
    overflow: auto;
    position: relative;
    display: inline-block;
    clear: both;
    float: left;
  }
  #menu li {
    font: 67.5%"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #menu a {
    background: #336699;
    border-bottom: 1px solid #336699;
    color: #ccc;
    display: block;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
    font-weight: normal;
  }
  #menu a:hover {
    background: #2580a2 url("images/hover.gif") left center no-repeat;
    color: #fff;
    padding-bottom: 8px;
  }
  #content {
    font-size: medium;
    color: #336699;
    background-color: #FFF;
    display: inline-block;
    width: 50%;
    margin-right: 25%;
    margin-left: 25%;
    text-align: center;
    height: auto;
    vertical-align: 5%;
    overflow: auto;
    clear: both;
    float: left;
  }

＆＃13;

<div id="nav-body">

  <div id="menu">

    <ul>
      <li class='active'><a href='index.html'>Home</a>
      </li>
      <li><a href='#'>Calendar</a>
      </li>
      <li><a href='#'>Announcements</a>
      </li>
      <li><a href='#'>Join or Renew</a>
      </li>
      <li><a href='#'>Seward Web Cams</a>
      </li>
      <li><a href='#'>Links to Resources</a>
      </li>
      <li><a href='#'>Weather</a>
      </li>
      <li><a href='#'>Newsletters</a>
      </li>
      <li><a href='#'>Snow Loads</a>
      </li>
      <li><a href='#'>Boat Flooding Information</a>
      </li>
      <li><a href='#'>Alaska Tide Links</a>
      </li>
      <li><a href='#'>Official Time</a>
      </li>
      <li><a href='#'>Officers</a>
      </li>
      <li><a href='#'>Photo Pages</a>
      </li>
      <li><a href='#'>Splicing Line</a>
      </li>
      <li><a href='#'>Member Webpages</a>
      </li>
      <li><a href='#'>AK Highway Info/Webcams</a>
      </li>
      <li><a href='#'>WHSYC Racing Rules</a>
      </li>
      <li><a href='#'>Harbor Maintenance Policy</a>
      </li>
      <li><a href='#'>Float Plan Form</a>
      </li>
      <li><a href='#'>Member Log-in</a>
      </li>
    </ul>


  </div>
  <!--end menu div-->


  <div id="content">
    <img src="PortAudrey.jpg" width="640" height="480">
    <p>Beautiful Port Audrey in southern Prince William Sound</p>



  </div>
  <!--end content div-->

</div>
<!--end nav-body div-->

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用position:absolute。具有position: absolute;的元素相对于最近的定位祖先定位（而不是相对于视口定位，如固定）。

像这样更新CSS：

#content {
font-size: medium;
color: #336699;
background-color: #FFF;
display: inline-block;
width: 50%;
margin-right: 25%;
margin-left: 15%;
text-align: center;
height: auto;
vertical-align: 5%;
overflow: auto;
clear: both;
float: left;
position:absolute; /*make position absolute*/
margin-top:1%;
}

这是Demo

Answer 2

使用此

#content {
font-size: medium;
color: #336699;
background-color: #FFF;
display: inline-block;
width: 50%;
margin-right: 15%;
margin-left: 15%;
text-align: center;
height: auto;
vertical-align: 5%;
overflow: auto;
clear: both;  
}

Answer 3

将此属性添加到您的css ..

为content添加这些

#content{
 position:absolute;
 right:0;
 width:60%;
}

代表menu

#menu{
 width:30%;
}

Answer 4

您可以在#content DIV周围添加一个包装器，其主要目的是将其内容水平居中（即您的#content DIV）

CSS已更改

 #content-wrapper {
    width: auto;
    overflow: hidden;
    text-align: center;
  }

  #content {
    font-size: medium;
    color: #336699;
    background-color: #FFF;
    display: inline-block;
    width: 50%;
    text-align: center;
    height: auto;
    vertical-align: 5%;
    overflow: auto;
  }

HTML已更改

  <div id="content-wrapper">
    <div id="content"><img src="PortAudrey.jpg" width="640" height="480">
      <p>Beautiful Port Audrey in southern Prince William Sound</p>
    </div>
    <!--end content div-->
  </div>

<强>演示：

＆＃13;

＆＃13;

#nav-body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #336699;
  display: inline-block;
  height: auto;
  width: 100%;
  vertical-align: top;
  overflow: hidden;
}
#menu {
  margin: 0;
  padding: 0;
  width: 12em;
  background-color: #336699;
  list-style-image: none;
  list-style-type: none;
  overflow: auto;
  position: relative;
  display: inline-block;
  clear: both;
  float: left;
}
#menu li {
  font: 67.5%"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  list-style: none;
}
#menu a {
  background: #336699;
  border-bottom: 1px solid #336699;
  color: #ccc;
  display: block;
  margin: 0;
  padding: 8px 12px;
  text-decoration: none;
  font-weight: normal;
}
#menu a:hover {
  background: #2580a2 url("images/hover.gif") left center no-repeat;
  color: #fff;
  padding-bottom: 8px;
}
#content-wrapper {
  width: auto;
  overflow: hidden;
  text-align: center;
}
#content {
  font-size: medium;
  color: #336699;
  background-color: #FFF;
  display: inline-block;
  width: 50%;
  text-align: center;
  height: auto;
  vertical-align: 5%;
  overflow: auto;
  clear: both;
}

＆＃13;

<div id="nav-body">

  <div id="menu">

    <ul>
      <li class='active'><a href='index.html'>Home</a>
      </li>
      <li><a href='#'>Calendar</a>
      </li>
      <li><a href='#'>Announcements</a>
      </li>
      <li><a href='#'>Join or Renew</a>
      </li>
      <li><a href='#'>Seward Web Cams</a>
      </li>
      <li><a href='#'>Links to Resources</a>
      </li>
      <li><a href='#'>Weather</a>
      </li>
      <li><a href='#'>Newsletters</a>
      </li>
      <li><a href='#'>Snow Loads</a>
      </li>
      <li><a href='#'>Boat Flooding Information</a>
      </li>
      <li><a href='#'>Alaska Tide Links</a>
      </li>
      <li><a href='#'>Official Time</a>
      </li>
      <li><a href='#'>Officers</a>
      </li>
      <li><a href='#'>Photo Pages</a>
      </li>
      <li><a href='#'>Splicing Line</a>
      </li>
      <li><a href='#'>Member Webpages</a>
      </li>
      <li><a href='#'>AK Highway Info/Webcams</a>
      </li>
      <li><a href='#'>WHSYC Racing Rules</a>
      </li>
      <li><a href='#'>Harbor Maintenance Policy</a>
      </li>
      <li><a href='#'>Float Plan Form</a>
      </li>
      <li><a href='#'>Member Log-in</a>
      </li>
    </ul>


  </div>
  <!--end menu div-->


  <div id="content-wrapper">
    <div id="content">
      <img src="PortAudrey.jpg" width="640" height="480">
      <p>Beautiful Port Audrey in southern Prince William Sound</p>



    </div>
    <!--end content div-->
  </div>

</div>
<!--end nav-body div-->

＆＃13;

＆＃13;

＆＃13;