Question

有没有办法让子div以定义的最小宽度开始，然后当我向该子div添加内容时，div会扩展直到达到最大宽度？因此，子div自动以其最大宽度开始。

的CSS：

#main{
    width:500px;
    min-height:250px;
    background-color: #33363b;
    border-radius: 10px;
    margin: 1% auto;
    overflow: hidden;
} 


#content{
    min-width: 237.5px;
    max-width:490px;
    min-height: 237.5px;
    background-color: white;
    margin: 1% auto;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
}

HTML：

<div id="main">
    <div id="content"></div>
</div>

Answer 1

<div>是一个块元素，它会将其宽度等于它的父级，因此您的元素不会获得min-width也不会{max-width 1}}样式，如果父容器宽度大于或小于您分别设置的内容。

要使元素宽度取决于内容，您需要使用inline元素或将display的CSS div更改为inline元素，

display: inline-block

此处更新了FIDDLE

更新

如果你想把它放在中心，只需添加CSS

text-align: center;

在其容器内（在您的情况下为#main），这里是FIDDLE

中的示例

Answer 2

http://jsfiddle.net/5S9Nt/

尝试添加

#content{
    float: left;
}

到内容div。

display: inline-block;

也会奏效。诀窍是，元素必须以某种方式设置为内联。

还有其他选项，具体取决于您希望内部div看起来像什么。 Javascript可以动态地强制div（及其内容）到你喜欢的任何地方。

媒体查询可能也有用吗？对问题的描述非常模糊。

@media (max-width: 600px) {}

min-width优先于max-width？

2 个答案:

更新