菜單div並排到div

有許多提到並排設置div，但沒有回答我的問題，並且我在嘗試解決這個問題時已經閱讀了很多。菜單div並排到div

「nav-body」div包含兩個其他div：菜單div應位於nav-body div的左側，而「content」div應位於nav-body的中間。菜單div位於nav-body div的左側，但內容div總是以水平居中顯示，但在最後一個菜單項下。我希望菜單和內容div與nav-body div中居中的內容div並排坐在一起。

#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; 
 
    }

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

來源

2016-01-22 AKSailor

----> https://jsfiddle.net/ysasLmLf/ <-------------這有助於？ – Help

你可以嘗試http://ironsummitmedia.github.io/startbootstrap-simple-sidebar/http://ironsummitmedia.github.io/startbootstrap-simple-sidebar/] –

使用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

來源

2016-01-22 03:40:57

使用此

#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; 
}

來源

2016-01-22 03:54:49

謝謝大家的光輝和快速回復。對於迪帕克，爲什麼簡單地改變左右邊距就會產生這樣的差異？ – AKSailor

這個屬性添加到你的CSS ..

爲content添加這些

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

爲menu

#menu{ 
width:30%; 
}

來源

2016-01-22 03:59:19

你可以周圍添加您的#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>

演示：

#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; 
 
}

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

來源

2016-01-22 06:34:19

菜單div並排到div

回答

相關問題