爲什麼我的文本沒有顯示在我的DIV中？

-2

你知道爲什麼我的<p>標籤之間的文本沒有顯示在紅色的DIV中，以及如何解決這個問題？非常感謝爲什麼我的文本沒有顯示在我的DIV中？

HTML：

<div id="carte-des-soins"> 
    <ul> 
     <li><span class="type-de-soin"><a href="#" data-region="soins-1"> Soins 1</a></span> 
     </li> 
     <li><span class="type-de-soin"><a href="#" data-region="soins-2"> Soins 2</a></span> 
     </li> 
     <li><span class="type-de-soin"><a href="#" data-region="soins-3"> Soins 3</a></span> 
     </li> 
     <li><span class="type-de-soin"><a href="#" data-region="soins-4"> Soins 4</a></span> 
     </li> 
    </ul> 
</div> 
<div id="description-des-soins"> 
    <div id="soins-1" class="textzone"> 
     <p>fvfd</p> 
    </div> 
    <div id="soins-2" class="textzone"> 
     <p>L'eau minérale</p> 
    </div> 
    <div id="soins-3" class="textzone"> 
     <p>Les personnes</p> 
    </div> 
    <div id="soins-4" class="textzone"> 
     <p>Les fgd</p> 
    </div> 
</div> 
<p></p> 
<br> 
<p></p> 
<br> 
<p></p> 
<br>

CSS

#carte-des-soins { 
    background: #ccc; 
    margin-left:auto; 
    margin-right:auto; 
    text-align: center; 

} 

#carte-des-soins ul { 
    list-style: none; 
} 
#carte-des-soins li { 
    display: inline; 
} 
#description-des-soins { 
    margin-right: auto; 
    margin-left: auto; 
    width: 50%; 
} 
#soins-1, #soins-2, #soins-3, #soins-4 { 
    position: relative; 
    display: block; 
    float: right; 
    margin-bottom: 30px; 
    padding: 5px 20px 20px 20px; 
    width: 650px; 
    height: 273px; 
    color: #333; 
    font: 12px'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 400; 
    line-height: 1px; 
    background: red; 
} 
#soins-1 h3, #soins-2 h3, #soins-3 h3, #soins-4 h3 { 
    color: #3A7CDB; 
    font-weight: 300; 
    font-size: 18px; 
} 
#soins-2, #soins-3, #soins-4 { 
    display: none; 
} 
#soins-2 p { 
    margin-bottom: 5px; 
} 
#soins-1 p { 
    margin-bottom: 5px; 
    padding-right: 10px; 
} 
#soins-1 a { 
    color: #3A7CDB; 
    text-decoration: none; 
} 
#soins-1 a:hover { 
    text-decoration: underline; 
}

$(document).ready(function() { 

    $('.type-de-soin a:first').css({ 
     'background-color': '#B4D454', 
     'color': '#fff' 
    }); 

    $('.type-de-soin a').click(function() { 
     var region = $(this).attr('data-region'); 

     $('.type-de-soin a').css({ 
      'background-color': '#fff', 
      'color': '#3A7CDB' 
     }); 
     $(this).css({ 
      'background-color': '#3A7CDB', 
      'color': '#fff' 
     }); 

     $('.textzone:visible').stop().fadeOut(500, function() { 
      $('#' + region).fadeIn(500); 
     }); 

     return false; 

    }); 

});

來源

2014-11-02 Greg

thext是存在的，只是滾動你的屏幕左 – 2014-11-02 20:35:59

你已經設置了一個css規則＃soins-2，＃soins-3，＃soins-4 { display：none; }導致它們不顯示 – kinakuta 2014-11-02 20:37:13

你紅色的div是右浮動，並且比母體寬，導致所有內容擴展到左側。您的段落不會浮動，因此它們位於左側，但不在屏幕上。

這是當我減少紅色的div的width會發生什麼：http://jsfiddle.net/0qLevh83/3/

底線：始終確保兒童元素可以符合他們的父元素

來源

2014-11-02 20:38:38 Shomz

爲什麼我的文本沒有顯示在我的DIV中？

回答

相關問題