我有一个问题，在将兄弟添加到容器后，我的文本正在消失。文本在那里，但由于某种原因，现在添加兄弟元素后，文本丢失。我刚刚注意到在完成片段之后文本就在它的容器后面。数字2，.container的宽度不是它应该在片段中的宽度。宽度仍在我的电脑上工作，但仍然是..
* {
margin: 0;
}
body {
background-color: green;
}
html,
body {
height: 100%;
}
header {
height: 20%;
}
#subnav {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
margin: 0;
flex-flow: row wrap;
border-radius: 4px;
justify-content: flex-start;
background-color: orange;
color: white;
height: 5%;
}
.container {
display: flex;
position: absolute;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
width: 70%;
margin: auto;
background-color: white;
}
.left {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
order: 1;
//flex: 1 20%;
width: 25%;
}
.middle {
display: flex;
flex-flow: column wrap;
order: 2;
flex: 2 20%;
width: 60%;
height: 100%;
}
.right {
display: flex;
position: relative;
flex-flow: row wrap;
align-content: flex-start;
justify-content: center;
order: 3;
width: 15%;
flex: 1 50%;
}
div.list{
display: flex;
flex-flow: row wrap;
width: 70%;
justify-content: center;
line-height: 300%;;
}
.right .list{
// text-align: center;
height: auto;
}
.list ul{
list-style: none;
padding: 0;
}
.list a{
text-decoration: none;
color: inherit;
}
.headbox h3{
color: orange;
}
#footer{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
list-style: none;
height: 150px;
flex-flow: row wrap;
justify-content: center;
align-items: center;
background-color: orange;
}
#nav li a{
color: white;
margin: 15px;
padding: 20px;
display: block;;
text-decoration: none;
font-size: 24px;
font-family: courier;
}
#nav li {
list-style: none;
}
#nav ul{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
margin: 0;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
div.logo {
margin: 0 auto;
width: 30%;
height: auto;
text-align: center;
}
#bigwrap{
height: 100%;
}
.container {
display: flex;
position: relative;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
min-height: 70vh;
width: 70%;
margin: 5% auto 8% auto;
background-color: white;
}
.container p {
margin-bottom: 12%;
}
.container img {
margin-bottom: 10%;
}
.left, .middle, .right{
border-right: 1px solid blue;
}
.middle {
display: flex;
flex-flow: column wrap;
order: 2;
flex: 2 20%;
}
.right .list{
height: auto;
}
.list ul{
list-style: none;
padding: 0;
}
.list a{
text-decoration: none;
color: inherit;
}
.headbox h3{
color: orange;
}
.right .headbox{
border-bottom: 1px solid orange;
width: 70%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
} <div id="bigwrap">
<div id="subnav">
home home home
<div>
<div class="container">
<div class="left">
<img src="filler.jpg" alt="Picture of kid">
<img src="filler.jpg" alt="Picture of kid">
</div>
<div class="middle">
<div class="box">
<p>
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text
</p>
</div>
<div class="box">
<p>
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text
</div>
<div class="box">
<p>
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text
</p>
</div>
</div>
<div class="right">
<div class="headbox">
<h3>Visit Us</h3>
</div>
<div class="list">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Hours</a></li>
<li><a href="#">Plan</a></li>
<li><a href="#">Directions</a></li>
</ul>
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
文字在那里，但它有颜色白色，并且它是背景颜色：白色。所以它是看不见的。改变颜色。
答案 1 :(得分：1)
看，当您更改容器的bg颜色时，文本是可见的。错误的是你设置文本的颜色，背景颜色为同一颜色，白色。
* {
margin: 0;
}
body {
background-color: green;
}
html,
body {
height: 100%;
}
header {
height: 20%;
}
#subnav {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
margin: 0;
flex-flow: row wrap;
border-radius: 4px;
justify-content: flex-start;
background-color: orange;
color: white;
height: 5%;
}
.container {
display: flex;
position: absolute;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
width: 70%;
margin: auto;
background-color: gray;
}
.left {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
order: 1;
//flex: 1 20%;
width: 25%;
}
.middle {
display: flex;
flex-flow: column wrap;
order: 2;
flex: 2 20%;
width: 60%;
height: 100%;
}
.right {
display: flex;
position: relative;
flex-flow: row wrap;
align-content: flex-start;
justify-content: center;
order: 3;
width: 15%;
flex: 1 50%;
}
div.list{
display: flex;
flex-flow: row wrap;
width: 70%;
justify-content: center;
line-height: 300%;;
}
.right .list{
// text-align: center;
height: auto;
}
.list ul{
list-style: none;
padding: 0;
}
.list a{
text-decoration: none;
color: inherit;
}
.headbox h3{
color: orange;
}
#footer{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
list-style: none;
height: 150px;
flex-flow: row wrap;
justify-content: center;
align-items: center;
background-color: orange;
}
#nav li a{
color: white;
margin: 15px;
padding: 20px;
display: block;;
text-decoration: none;
font-size: 24px;
font-family: courier;
}
#nav li {
list-style: none;
}
#nav ul{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
margin: 0;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
div.logo {
margin: 0 auto;
width: 30%;
height: auto;
text-align: center;
}
#bigwrap{
height: 100%;
}
.container {
display: flex;
position: relative;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
min-height: 70vh;
width: 70%;
margin: 5% auto 8% auto;
background-color:gray;
}
.container p {
margin-bottom: 12%;
}
.container img {
margin-bottom: 10%;
}
.left, .middle, .right{
border-right: 1px solid blue;
}
.middle {
display: flex;
flex-flow: column wrap;
order: 2;
flex: 2 20%;
}
.right .list{
height: auto;
}
.list ul{
list-style: none;
padding: 0;
}
.list a{
text-decoration: none;
color: inherit;
}
.headbox h3{
color: orange;
}
.right .headbox{
border-bottom: 1px solid orange;
width: 70%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
} <div id="bigwrap">
<div id="subnav">
home home home
<div>
<div class="container">
<div class="left">
<img src="filler.jpg" alt="Picture of kid">
<img src="filler.jpg" alt="Picture of kid">
</div>
<div class="middle">
<div class="box">
<p>
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text
</p>
</div>
<div class="box">
<p>
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text
</div>
<div class="box">
<p>
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text
Sample Text Sample Text Sample Text
</p>
</div>
</div>
<div class="right">
<div class="headbox">
<h3>Visit Us</h3>
</div>
<div class="list">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Hours</a></li>
<li><a href="#">Plan</a></li>
<li><a href="#">Directions</a></li>
</ul>
</div>
</div>
</div>
</div>