Question

我正在尝试为这种情况找到解决方案：

我有一个具有静态宽度和overflow-x: auto; 2个子div的div容器，其中一个具有固定宽度，另一个没有。

如何使没有宽度的div与父级具有相同的宽度？

以下是一个例子：

http://jsfiddle.net/no1lov3sme/U7PhY/1827/

Answer 1

只需使用'display：block;'而不是width，您可以使用以下CSS：

#child2 {
    display: block;
    background: red;
    padding: 20px;
}

updated fiddle

Answer 2

div只能使用宽度：100％;

，与父级的宽度相同

因此，只需在CSS上编写此代码即可解决您的问题：

var ua = navigator.userAgent.toLowerCase();
var is_android_native = ((ua.indexOf('mozilla/5.0') > -1 && ua.indexOf('android ') > -1 && ua.indexOf('applewebkit') > -1) && !(ua.indexOf('chrome') > -1));

那是Demo Updated

希望有所帮助：）

Answer 3

您可以使用

 max-width: 100%;

，无论您生成的内容如何，宽度始终保持在100％以下。

Answer 4

如果你想同时宽度与父div相同的子div。你可以用两种方式试试这个

#child1{
   width:inherit;
   background:green;
   padding:20px;
   box-sizing:border-box;
}

你也可以使用：

width:100%;

box-sizing属性不是强制性的，但它有助于管理边距和填充。

Answer 5

我找到了解决办法，如果你将儿童div包装到另一个div并将display: table;和width: 100%;设置为该div，它就解决了我的问题。

演示：http://jsfiddle.net/no1lov3sme/pe2mks4j/2/

overflow-x div子宽度

5 个答案: