Текст, исчезающий за контейнером

У меня проблема, когда мой текст исчезает после добавления брата в контейнер. Текст был там, но по какой-то причине теперь после добавления элемента sibling, текст отсутствует. Я заметил, что после выполнения фрагмента текст находится за его контейнером. И номер 2, ширина .container - это не то, что должно быть в фрагменте. Ширина по-прежнему работает на моем компьютере, но все же ..Текст, исчезающий за контейнером

* { 
 
    margin: 0; 
 
} 
 

 

 

 
body { 
 
    background-color: green; 
 
} 
 

 

 
html, 
 
body { 
 
    height: 100%; 
 

 
} 
 

 

 
header { 
 
\t 
 
\t 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%; 
 

 
\t 
 
} 
 

 

 

 
.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"> 
 
     \t <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> 
 

 
\t \t 
 

 
\t </div>

источник

2016-08-06 Shinji-san

ли вы создать скрипку или codepen для тестирования? –

Здесь вы найдете: https://jsfiddle.net/9pvab92z/ –

текст есть, но есть цвет-белый, и на цвет фона: белый. Так что это невидимо. Изменить цвет.

источник

2016-08-06 23:27:08

Нет, это текст subnav, а не контейнер. Текст контейнера черный и частично виден за контейнером. –

Я отвечаю вам в другом посте, поэтому у вас есть фрагмент прямо сейчас –

Посмотрите, когда вы измените bg-цвет контейнера, текст будет виден. Неправильно то, что вы задали цвет текста, а цвет фона - того же цвета, белый.

* { 
 
    margin: 0; 
 
} 
 

 

 

 
body { 
 
    background-color: green; 
 
} 
 

 

 
html, 
 
body { 
 
    height: 100%; 
 

 
} 
 

 

 
header { 
 
\t 
 
\t 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%; 
 

 
\t 
 
} 
 

 

 

 
.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"> 
 
     \t <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> 
 

 
\t \t 
 

 
\t </div>

источник

2016-08-06 23:43:07

Текст, исчезающий за контейнером

ответ

Смежные вопросы