Question

我正在尝试将文本放入嵌套的div中，它仅对某些部分有效，但对所有部分无效。当我尝试将文本放置在无法正常工作的地方时，它会迫使其他div元素排成一行，我有一个以前的版本，我以相同的方式嵌套了它们并且没有这个问题。知道我哪里出错了吗？

    /* my css for the divs */
div.mycard{
    background-color: beige;
    width: 400px;
    height: 35px;
    margin-left: 75%;
    margin-bottom: 2px;
}
div.cardcost{
    background-color: blue;
    width: 30px;
    height: 35px;
}
div.hscardepic{
    background-color: rgb(233, 27, 233);
    height: 35px;
    width: 5px;
}
div.cardamount{
    background-color: black;
    width: 30px;
    height: 35px;
    z-index: 11;
    margin-left: 8000%;
}
p.cardname{
    z-index: 12;
    font-weight: bolder;
    margin: 0;
}

    <!-- These divs are nested in another div with display: inline-block to put them next to text-->
<div class="mycard">
    <div class="cardcost">
        <div class="hscardepic">
            <div class="cardamount">
                <p style="margin-left: 5px;color: white;">&times;2</p>
            </div>
         </div>  
     </div>
 </div>

Answer 1

隐藏段落的主要问题是由于margin-left: 8000%;中的div.cardamount将div推到了视口之外

cardname元素上未设置类p的另一个问题，因此您的CSS规则未应用

这是固定版本https://jsfiddle.net/xr271aen/1/

Answer 2

简单使用flex方法... 我稍微修改了您的html代码：）

<div class="single-post-content">
    <div class="responsive-tables"></div>
    <table></table>
</div>

    /* my css for the divs */
div.mycard{
background-color: beige;
    width: 100%;
    height: 35px;
    margin-left: 0%;
    margin-bottom: 2px;
    display: flex;
}
div.cardcost{
    background-color: blue;
    width: 30%;
    height: 35px;
}
div.hscardepic{
    background-color: rgb(233, 27, 233);
    height: 35px;
    width: 20%;
}
div.cardamount{
    background-color: black;
    width: 20%;
    height: 35px;
    z-index: 11;
    margin-left: 0;
}
p.cardname{
    z-index: 12;
    font-weight: bolder;
    margin: 0;
}

将文本放入嵌套div标签的问题

2 个答案: