[英]<div> vertical alignment
我正在嘗試為網站上的幾個頁面創建側面導航菜單。 我用來創建不同的列,一列用於內容,一列用於導航菜單。 問題在於內容在正確的列中,但是它與菜單沒有垂直對齊。
我使用CSS在網站的其他頁面上創建了兩個不同的列,但是我在這里缺少了一些東西。 為了確保頁面右側的內容與菜單欄在頁面頂部對齊,我需要更改什么? 感謝您的幫助,我真的很感激。
這是代碼和隨附的jsfiddle鏈接。 http://jsfiddle.net/tbon324536/Fv5Q6/
table#vitamins{
border: 1px solid black;
font-size: 16px;
}
table#vitamins td {
border: 1px solid black;
padding: 5px;
font-size: 16px;
}
table#vitamins tr {
background: #b8d1f3;
font-size: 16px;
}
table#vitamins tr:nth-child(even) {
background: #b8d1f3;
}
table#vitamins tr:nth-child(odd) {
background: #dae5f4;
}
table#vitamins th {
border: 1 px solid black;
}
/**=============Content Layout================**/
#contentmenu ul {margin: 0;
float:none;
padding:0px;
width:180px;
list-style-type: none;
list-style-image: none;
}
#contentmenu li {display: inline;
float: left;
margin-right:10px;
}
#contentmenu a {display:block;
padding:10px;
width:180px;
color:#ffffff;
font-size:20px;
background-color:#2b547c;
}
#contentsubmenu ul {margin: 0;
float:none;
padding:0px;
width:180px;
list-style-type: none;
list-style-image: none;
}
#contentsubmenu li {display:block;
float: none;
}
#contentsubmenu a {display:block;
width:180px;
color:#000000;
font-size:16px;
border-bottom:solid;
border-bottom-width:1px;
background-color:#ffffff
}
#mineralmenu ul {margin: 0;
margin-left:260px;
width:180px;
list-style-type: none;
list-style-image: none;
}
#mineralmenu li {display: inline;
float: left;
margin-right:10px;
}
#mineralmenu a {display:block;
padding:10px;
width:180px;
color:#ffffff;
font-size:20px;
background-color:#2b547c;
}
#mineralsubmenu ul {margin: 0;
float:none;
padding:0px;
width:180px;
list-style-type: none;
list-style-image: none;
}
#mineralsubmenu li {display:block;
float: none;
}
#mineralsubmenu a {display:block;
width:180px;
color:#000000;
font-size:16px;
border-bottom:solid;
border-bottom-width:1px;
background-color:#ffffff;
}
#antioxidantmenu ul {margin: 0;
margin-left:500px;
width:180px;
list-style-type: none;
list-style-image: none;
}
#antioxidantmenu li {display: inline;
float: left;
margin-right:10px;
}
#antioxidantmenu a {display:block;
padding:10px;
width:180px;
color:#ffffff;
font-size:20px;
background-color:#2b547c;
}
#antioxidantsubmenu ul {margin: 0;
float:none;
padding:0px;
width:180px;
list-style-type: none;
list-style-image: none;
}
#antioxidantsubmenu li {display:block;
float: none;
}
#antioxidantsubmenu a {display:block;
width:180px;
color:#000000;
font-size:16px;
border-bottom:solid;
border-bottom-width:1px;
background-color:#ffffff;
}
/**===========Content Left Menu==============**/
#pagemenu ul {margin: 0;
float:none;
padding:0px;
width:100px;
list-style-type: none;
list-style-image: none;
}
#pagemenu li {display: inline;
float:none;
}
#pagemenu a {display:block;
padding:10px;
width:100px;
color:#ffffff;
font-size:16px;
background-color:#2b547c;
}
#pagesubmenu ul {margin: 0;
margin-right:15px;
float:none;
padding:0px;
width:100px;
list-style-type: none;
list-style-image: none;
}
#pagesubmenu li {display:block;
float: none;
}
#pagesubmenu a {display:block;
width:100px;
color:#000000;
font-size:14px;
border-bottom:solid;
border-bottom-width:1px;
background-color:#ffffff
}
**/============Paragraph Layout=============*//
#leftcontent {
padding-top:15px;
width: 480px;
float: none;
}
#rightcontent {
margin-left: 480px;
}
這是HTML。
<div id="leftcontent">
<div id="pagemenu">
<ul>
<li><a href="/Articles.asp?ID=273" alt="Vitamins">Vitamins ></a>
<div id="pagesubmenu">
<ul>
<li><a href="/Articles.asp?ID=265" alt="Vitamin A">Vitamin A ></a></li>
<li><a href="/Articles.asp?ID=266" alt="Vitamin B6">Vitamin B6 ></a></li>
<li><a href="/Articles.asp?ID=267" alt="Vitamin b12">Vitamin B12 ></a></li>
<li><a href="/Articles.asp?ID=268" alt="Vitamin C">Vitamin C ></a></li>
<li><a href="/Articles.asp?ID=268" alt="Vitamin D">Vitamin D ></a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div id="vitaminguide">
</div>
<br/><br/>
<div id="rightcontent">
<table id="vitamins">
<tbody>
<tr>
<th>
<inline style="font-size: 16px;">
Food
</inline>
</th>
<th>
<inline style="font-size: 16px;">
Serving Size
</inline>
</th>
<th>
<inline style="font-size: 16px;">
Amount (IU)
</inline>
</th>
<th>
<inline style="font-size: 16px;">
% Daily Value
</inline>
</th>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Fish Oil, Cod Liver
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Tbsp
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1360
</inline>
</td>
<td>
<inline style="font-size: 16px;">
340%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Portabella Mushrooms, Grilled
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Cup Sliced
</inline>
</td>
<td>
<inline style="font-size: 16px;">
634
</inline>
</td>
<td>
<inline style="font-size: 16px;">
159%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Rainbow Trout, Cooked
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Fillet
</inline>
</td>
<td>
<inline style="font-size: 16px;">
539
</inline>
</td>
<td>
<inline style="font-size: 16px;">
135%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Sockeye Salmon, Cooked
</inline>
</td>
<td>
<inline style="font-size: 16px;">
3.0 Oz
</inline>
</td>
<td>
<inline style="font-size: 16px;">
447
</inline>
</td>
<td>
<inline style="font-size: 16px;">
112%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Canned Tuna Fish
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1.0 Cup
</inline>
</td>
<td>
<inline style="font-size: 16px;">
393
</inline>
</td>
<td>
<inline style="font-size: 16px;">
98%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Morel Mushrooms
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1.0 Cup
</inline>
</td>
<td>
<inline style="font-size: 16px;">
136
</inline>
</td>
<td>
<inline style="font-size: 16px;">
34%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Tilapia, Cooked
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Fillet
</inline>
</td>
<td>
<inline style="font-size: 16px;">
130
</inline>
</td>
<td>
<inline style="font-size: 16px;">
33%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Whole Milk, Fortified
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1.0 Cup
</inline>
</td>
<td>
<inline style="font-size: 16px;">
124
</inline>
</td>
<td>
<inline style="font-size: 16px;">
31%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Fortified Soy Milk
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1.0 Cup
</inline>
</td>
<td>
<inline style="font-size: 16px;">
100
</inline>
</td>
<td>
<inline style="font-size: 16px;">
25%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Spareribs
</inline>
</td>
<td>
<inline style="font-size: 16px;">
3.0 Oz
</inline>
</td>
<td>
<inline style="font-size: 16px;">
88
</inline>
</td>
<td>
<inline style="font-size: 16px;">
22%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Roasted Turkey Breast
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Breast
</inline>
</td>
<td>
<inline style="font-size: 16px;">
86
</inline>
</td>
<td>
<inline style="font-size: 16px;">
22%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Fortified Yogurt
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Container (6 Oz.)
</inline>
</td>
<td>
<inline style="font-size: 16px;">
80
</inline>
</td>
<td>
<inline style="font-size: 16px;">
20%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Yellowfin Tuna, Cooked
</inline>
</td>
<td>
<inline style="font-size: 16px;">
3.0 Oz
</inline>
</td>
<td>
<inline style="font-size: 16px;">
70
</inline>
</td>
<td>
<inline style="font-size: 16px;">
18%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Ground Turkey, Raw
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1.0 Lb
</inline>
</td>
<td>
<inline style="font-size: 16px;">
64
</inline>
</td>
<td>
<inline style="font-size: 16px;">
16%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Hard-Boiled Egg
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Large Egg
</inline>
</td>
<td>
<inline style="font-size: 16px;">
44
</inline>
</td>
<td>
<inline style="font-size: 16px;">
11%
</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">
Pork Chop, Broiled
</inline>
</td>
<td>
<inline style="font-size: 16px;">
1 Chop
</inline>
</td>
<td>
<inline style="font-size: 16px;">
38
</inline>
</td>
<td>
<inline style="font-size: 16px;">
10%
</inline>
</td>
</tr>
</tbody>
</table>
<p>
<inline style="font-size: 16px;"><br/><b>Daily Recommendations for Vitamin D Intake</b><br/></inline>
</p>
<table id="vitamins">
<tbody>
<tr>
<th>
<inline style="font-size: 16px;">Age</inline>
</th>
<th>
<inline style="font-size: 16px;">Male</inline>
</th>
<th>
<inline style="font-size: 16px;">Female</inline>
</th>
<th>
<inline style="font-size: 16px;">Pregnant</inline>
</th>
<th>
<inline style="font-size: 16px;">Lactating</inline>
</th>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">0-12 Months</inline>
</td>
<td>
<inline style="font-size: 16px;">400 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">400 IU</inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">1-13 Years</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">14-18 Years</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">19-50 Years</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">51-70 Years</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
</tr>
<tr>
<td>
<inline style="font-size: 16px;">70+ Years</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;">600 IU</inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
<td>
<inline style="font-size: 16px;"></inline>
</td>
</tr>
</tbody>
</table>
</div>
</div>
您需要添加float: left;
屬性設置為您的#leftcontent
div。
此處的說明,定義和示例: http : //www.w3schools.com/css/css_float.asp
您需要使用float: left;
在您的左列。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.