Question

你知道为什么我的<p>标签之间的文字没有显示在红色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;
}

JS

$(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;

    });

});

Answer 1

你的红色div是向右浮动的，并且比父级更宽，导致所有内容都扩展到左侧。你的段落没有浮动，因此它们在左侧，但在屏幕外。

当我减少红色div的width时会发生这种情况：http://jsfiddle.net/0qLevh83/3/

底线：始终确保子元素可以适合其父元素

为什么我的文字没有显示在我的DIV中？

1 个答案: