Question

我有一个容器，我想要min-width 250px，默认宽度为500px。但是，如果其中的内容变得大于500px，我希望它增长到适合该内容。

我该怎么做？

＆＃13;

.e
{
    font-size:20px;
}
.viewport1, .viewport2
{
    border-width:1px;
    border-color:#000000;
    border-style:solid;
    padding:20px;
}
.viewport1
{
    width:300px;
}
.viewport2
{
    width:800px;
}
.root
{
    background-color:#FFCCCC;
    min-width:400px;
    max-width:600px;
    padding:20px;
}
.colFixed
{
    background-color:#CCFFFF;
    width:200px;
    float:right;
    height:150px;
    padding:20px;
}
.colFluid
{
    background-color:#FFCCFF;
    overflow:hidden;
    padding:20px;
}

＆＃13;

<div class="viewport1">
    <p class="e">Viewport 1: Demonstrates min-width</p>
<div class="root">
    <div class="colFixed"></div>
    <div class="colFluid">
        <img src="http://placehold.it/20x150">
    </div>
</div>
</div>
    
<div class="viewport2">
    <p class="e">Viewport 2: Demonstrates default width</p>
<div class="root">
    <div class="colFixed"></div>
    <div class="colFluid">
        <img src="http://placehold.it/200x150">
    </div>
</div>
    </div>
    
<div class="viewport2">
    <p class="e">Viewport 2: But it should resize to the picture</p>
<div class="root">
    <div class="colFixed"></div>
    <div class="colFluid">
        <img src="http://placehold.it/400x150">
    </div>
</div>
    </div>

＆＃13;

Answer 1

也许尝试删除width:500px以便div可以随内容增长并添加max-width以限制它作为您的需要并将您的最小宽度设置为500px以将其用作媒体的默认宽度 - 查询较小的屏幕。如果你要添加一些代码，我可以帮你更多。

Css默认宽度为min-width，但增长到适合内容

1 个答案: