Question

对于挣扎于毫无疑问是一个非常简单的CSS问题我感到非常愚蠢：一个在祖先div之外打破的div。 See pic

我的HTML结构是这样的：

<div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 equalHeight author-card">
    <div class="usr-fav-cuisine-wrapper">
        <div class="usr-fav-cuisine-item">Chinese</div>
        <div class="usr-fav-cuisine-item">Flemish</div>
        <div class="usr-fav-cuisine-item">French</div>
        <div class="usr-fav-cuisine-item">German</div>
        <div class="usr-fav-cuisine-item">Italian</div>
        <div class="usr-fav-cuisine-item">Japanese</div>
    </div>
</div>

我的CSS：

.author-card {
    overflow: hidden;
}
.usr-fav-cuisine-wrapper {
    margin-left: 10px;
    max-width: 80%;
}
.usr-fav-cuisine-item {
    display: inline

}

类作者卡现在已经隐藏了溢出但当然没有解决方案 - 仅仅是隐藏，并且不会使其子进入下一行。我还给了作者卡一个最大宽度，但没有结果。我也想过给父母一个最大宽度，给项目本身一个内联显示就可以了，但显然没有。

我使用了bootstrap subtheme - 我看到我使用的所有col-classes都有左浮动，但是当我在Chrome Inspector中取消该框时，没有任何变化。如果有人能指出我正确的方向，我会很感激。

提前致谢！

Answer 1

为什么不使用overflow：hidden;在.usr-fav-cuisine-wrapper？但当然我意识到你需要看到div中的文本，也就是孩子们的div，我回答了我自己的问题。尝试为margin-right设置与.usr-fav-cuisine-wrapper相同的box-sizing:inherit;，并在其上使用{{1}}。

如果有效，请告诉我：D。

Answer 2

所以你应该真正使用display: inline作为块元素。另请注意，在<div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 equalHeight author-card"> <ul class="usr-fav-cuisine-wrapper list-inline"> <li class="usr-fav-cuisine-item">Chinese</li> <li class="usr-fav-cuisine-item">Flemish</li> <li class="usr-fav-cuisine-item">French</li> <li class="usr-fav-cuisine-item">German</li> <li class="usr-fav-cuisine-item">Italian</li> <li class="usr-fav-cuisine-item">Japanese</li> </ul> </div>之后，您没有分号。

但是，这是使用标准引导类和略微修改的DOM来反映它是列表的另一种方法。

HTML

.author-card {
    /* overflow: hidden; No sure you'll need this line */
}
.usr-fav-cuisine-wrapper {
    margin-left: 10px;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
}
.usr-fav-cuisine li {
    /* More CSS here if needed /*
}

CSS

list-inline

查找有关$connection = ssh2_connect($server, 22); ssh2_auth_password($connection, 'root', 'password'); $sftp = ssh2_sftp($connection); // <-- THis line ssh2_sftp_unlink ($sftp, "/var/www/$db/url.txt"); bootstrap 3内嵌内容here的详细信息。

Div打破祖先div

2 个答案: