CSS div的边界不可见

时间：2016-10-01 08:29:53

标签： html css css3

亲爱的专业人士！

我无法实现的目标 - 使mcontent div正确风格化。实际上我不知道为什么不使用这个非常简单的css代码。 lside和内容div位于mcontent div中。我想让mcontent div左右边界，但我无法做到这一点。如果我从css文件中取出内容和/或lside格式，边框可见。如果我格式化lside和内容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
*/

提前感谢您的帮助！

2 个答案:

答案 0 :(得分：0)

你正试图设计一个空的div - 它里面没有内容，但是其他div（s） - 在你添加内容或给它一个高度之前，样式不会起作用

添加最小高度：200px;并显示：table; #mcontent就像这样

#mcontent {
 margin: 0px auto;
 width: 892px;
 border-left: 5px solid #808080;
 border-right: 5px solid #808080;
 min-height:200px;  
 display: table;
 }

这是一个小提琴https://jsfiddle.net/majali/vzx80x97/6/

答案 1 :(得分：0)

<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 style="clear:both">

和风格：

#mcontent {
  margin: 0px auto;
  display:inline-block;
  border-left: 5px solid #808080;
  border-right: 5px solid #808080;
}
相关问题
最新问题