-2
親愛的更多專家優點！CSS div的邊框不可見
我無法實現 - 使mcontent div的風格正確。其實我不知道爲什麼不用這個非常簡單的CSS代碼。 lside和content div在mcontent div中。我想讓mcontent div左右邊界，但我無法實現。如果我從css文件中取出內容和/或lside格式，則可以看到邊框。如果我將lside和content div格式化，那麼mcontent div在我看來似乎是不可見的。 （給它背景顏色，這是不可見的這些提到的div）我不知道爲什麼。我檢查了編碼錯誤的HTML文件 - 我沒有發現任何問題。
這是HTML文件：
<html>
<head>
<link rel="stylesheet" href="firstsite.css" type="text/css" />
<meta charset="utf-8" />
<title>Website</title>
</head>
<body>
<div id="main">
<div id="header">
<h1>Website</h1>
</div>
<div id="navi">
<ul class="menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2_1</a></li>
<li><a href="#">Menu 2_2</a></li>
<li><a href="#">Menu 2_3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Menu 3_1</a></li>
<li><a href="#">Menu 3_2</a></li>
<li><a href="#">Menu 3_3</a></li>
<li><a href="#">Menu 3_4</a></li>
<li><a href="#">Menu 3_5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
</ul>
</div>
<div id="mcontent">
<div id="lside">
<div id="lside_1">DIV 1
</div>
<div id="lside_2">DIV 2
</div>
<div id="lside_3">DIV 3
</div>
</div>
<div id="content">
<h2 text-aling="center">1. menupoint - no submenu</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum maximus leo, id euismod enim finibus ac. Fusce velit tortor, tincidunt a commodo et, elementum in enim. Ut eget varius elit, vel fermentum eros. Sed at nulla ornare odio rhoncus hendrerit sit amet nec massa. Integer at ultrices urna. Fusce a libero vel purus fringilla condimentum et sed eros. Fusce vestibulum velit eget libero bibendum maximus. Suspendisse in libero mattis magna fringilla interdum vel quis nulla. Pellentesque dapibus, elit eget efficitur pretium, diam dui luctus massa, non semper elit orci eget mi. Nunc condimentum pretium dapibus. Nulla iaculis urna nec eros commodo, eu lacinia eros ullamcorper. Phasellus euismod rutrum nulla id malesuada. In pellentesque turpis vel vehicula lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum maximus leo, id euismod enim finibus ac. Fusce velit tortor, tincidunt a commodo et, elementum in enim. Ut eget varius elit, vel fermentum eros. Sed at nulla ornare odio rhoncus hendrerit sit amet nec massa. Integer at ultrices urna. Fusce a libero vel purus fringilla condimentum et sed eros. Fusce vestibulum velit eget libero bibendum maximus. Suspendisse in libero mattis magna fringilla interdum vel quis nulla. Pellentesque dapibus, elit eget efficitur pretium, diam dui luctus massa, non semper elit orci eget mi. Nunc condimentum pretium dapibus. Nulla iaculis urna nec eros commodo, eu lacinia eros ullamcorper. Phasellus euismod rutrum nulla id malesuada. In pellentesque turpis vel vehicula lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum maximus leo, id euismod enim finibus ac. Fusce velit tortor, tincidunt a commodo et, elementum in enim. Ut eget varius elit, vel fermentum eros. Sed at nulla ornare odio rhoncus hendrerit sit amet nec massa. Integer at ultrices urna. Fusce a libero vel purus fringilla condimentum et sed eros. Fusce vestibulum velit eget libero bibendum maximus. Suspendisse in libero mattis magna fringilla interdum vel quis nulla. Pellentesque dapibus, elit eget efficitur pretium, diam dui luctus massa, non semper elit orci eget mi. Nunc condimentum pretium dapibus. Nulla iaculis urna nec eros commodo, eu lacinia eros ullamcorper. Phasellus euismod rutrum nulla id malesuada. In pellentesque turpis vel vehicula lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
</div>
<div id="footer">
<h2>PHP Website by FGB 2016</h2>
</div>
</div>
</body>
，這是CSS文件：
body {
margin: 0px;
padding: 0px;
}
#main {
margin: 0px auto;
padding: 20px;
width: 940px;
border: 1px solid red; /* just for seeing*/
}
#header {
margin: 0px auto;
background-color: #808080;
width: 900px;
border: 1px #808080 solid;
border-bottom: 2px #FA801D solid;
border-radius: 15px 15px 0px 0px;
}
#header h1 {
color: white;
text-align: center;
}
#mcontent {
margin: 0px auto;
width: 892px;
border-left: 5px solid #808080;
border-right: 5px solid #808080;
}
#lside {
margin-left: 10px;
float: left;
width: 200px;
height: auto;
border: 1px solid black;
}
#lside_1 {
border: 1px solid black;
}
#lside_2 {
border: 1px solid black;
}
#lside_3 {
border: 1px solid black;
}
#content {
float: right;
margin-right: 10px;
width: 600px;
padding: 0px 15px;
border: 1px solid;
}
#content h2 {
text-align: center;
}
#content p {
text-align: justify;
}
#footer {
clear: both;
margin: 0px auto;
background-color: #808080;
width: 900px;
height: 60px;
border-width: 0px 1px 1px 1px;
border-style: solid;
line-height: 60px;
border-radius: 0px 0px 15px 15px;
border-top: 10px #FA801D solid;
}
#footer h2 {
margin: 0px;
color: white;
text-align: center;
}
/*
* navi section
*/
.menu {
margin: 0px auto;
height: 40px;
width: 900px;
background: #808080;
padding: 0px;
border-left: 1px solid #808080;
border-right: 1px solid #808080;
border-bottom: 10px #FA801D solid;
}
.menu li {
position: relative;
text-align: center;
list-style: none;
width: 25%;
height: 40px;
float: left;
}
.menu li a {
text-align: center;
display: block;
line-height: 40px;
text-decoration: none;
font-family: Verdana, Tahoma, Geneva, sans-serif;
font-weight: bold;
font-size: 1.2em;
color: white;
transition: .3s background-color;
}
.menu li:hover > a {
background-color: #FA801D;
}
.menu ul {
position: absolute;
padding: 0;
top: 50px;
background: #808080;
opacity: 0;
box-shadow: 3px 3px 3px #888888;
}
.menu li:hover > ul {
opacity:1;
}
.menu ul li {
height:0;
overflow: hidden;
padding: 0;
width: 100%;
border-top: 1px grey solid;
border-bottom: 1px grey solid;
}
.menu li:hover > ul li {
height: 40px;
overflow: visible;
}
/*
* end of navi section
*/
預先感謝您的幫助！
歡迎堆棧溢出！發佈鏈接時要小心。因爲如果您的雲端硬盤的鏈接已重置，則該帖子對其他人無效。所以請編輯你的帖子，並添加[標籤：HTML]/[標籤：CSS]代碼沒有[標籤：PHP] – Fralec