Question

我有一个父div，在div中我有两个级别的子div如下，

<div class="grandParant">
    <div class="parant1">test</div> 
    <div class="parant2"> 
        <div class="child">Hello world this is a long test string</div>
         <div class="child">12</div>
         <div class="child">4545</div>
    </div>
</div>

从上面的示例代码中，我需要显示整个第一个“子”类内容（Hello world这是一个长测试字符串），没有任何中断，即在一行中。 “parant2”div的宽度也应相对于子宽度递增。那怎么能用css完成呢？我没有发布我的CSS，因为它有点冗长，但你可以在jsfiddle中看到它。

修改我的预期输出更像字母'L'

| test |
| Hello world this is a long test string |
| 12                                     |
| 4545                                   |

我的jsfiddle

Answer 1

您可以通过删除“max-width”...

来实现

如果你给出“max-width”它只会达到那个范围，超过那个宽度就会打破这些线

仅将css放入

min-width:100px;

这是fiddel http://jsfiddle.net/9Sha7/8/

Answer 2

如果您移除了max-width在其祖父母之外的parant1，您将获得所需的非包装结果：

DEMO：http://jsfiddle.net/9Sha7/18/

Answer 3

取出填充

.grandParant{
margin:0 auto;
float:left;
min-width:100px;
max-width:120px;    
height:150px;
position:relative;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background:#cccccc;
font-size:11px;
cursor:pointer;    
}
.parant1{
    width:auto;
margin-bottom:22px;

text-align:center;
    background:blue;
}
.parant2{

text-align:left;
width:auto;
background:#f3f3f3;
}

.child{
     width:100%;
position:static;
background:green;
}
}

Answer 4

只需删除所有width属性和max-width，然后根据您的要求应该没问题：http://jsfiddle.net/9Sha7/13/

Answer 5

从max-width课程中移除.grandParent，并将white-space:nowrap;提供给您的.child课程。

<强> Working Fiddle

设置内部div的全宽

5 个答案: