Question

我在父级中有一个div，它可以进行水平滚动。我有css和jquery使得可以做到这一点，但是我不得不使用空格不换行来使内容水平溢出。如果我为上述div定义一个设置宽度，例如55rem，那么一切都很好。但是我的网站反应灵敏，我无法将宽度调整为每个尺寸...因此我想使用100％的宽度，但是无论尝试什么，都会溢出。

我环顾四周，看看是否能找到专门谈论此事的东西，但我什至找不到任何东西告诉我由于某种原因这是不可能的。我不确定，也许我没有使用正确的关键字。

为了争执，这里是祖父母。

.dashboard_container {
display: table;
height: 100%;
width: 55rem;
margin: auto;
padding-top: 2rem;
}

这是我的父母。

.dashboard_post_container {
background: white;
position: relative;
display: inline-table;
-webkit-border-radius: .4rem;
-moz-border-radius: .4rem;
border-radius: .4rem;
margin-bottom: 2rem;
width: 100%;
overflow: hidden;
}

还有孩子。

.dashboard_suggestions {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}

有人评论要求提供示例，所以这里是一个小提琴：https://jsfiddle.net/08vwyg4b/

您只需要将孩子的宽度更改为100％即可了解我的意思。

我希望孩子的宽度是父母和祖父母的100％。但是我必须使用空白无包装来实现我正在做的主要目标。

Answer 1

很熟悉（this link）

只需更改显示（以阻止）和 width 属性

.dashboard_container {
    display: block;
    width: 50%; /*Resize for test responsive*/
    /*Your css*/
    }
.dashboard_post_container {
    display: block;
    width: auto;
    /*Your css*/
    }
.dashboard_suggestions {
    width: auto;
    /*Your css*/

    }

DEMO

是否可能有一个带空白且没有包装且父级宽度为100％的Div？

1 个答案: