Html 如何制作预设的自动调整div？

我想问一个我想知道一段时间的问题

我想做一个网站，当你重新打开窗口时，divbox会自动调整。。因此，如果它旁边的另一个div是内联的，那么它们的大小就会减小

我已就第二个问题举了一个例子，我会加以解释

这张图片是我希望网站在第一页上的外观，这样我就可以把左边的内容放在更大的div中，然后把右边的控制面板放在这个大小

我想这样做，当我从实际的html中删除边栏时，可以为另一个页面创建边栏；内容将自动调整为容器的全长，即

---

如果可以的话，请帮助我！谢谢大家!

您可以使用jQuery将其设置为“disapear”，如下所示：

`$（文档）.ready（函数（）{

}))`

---

它应该是这样的：

大多数现代浏览器支持媒体查询

@media

，当某些条件为真时，它会自动触发

为了更好地理解它

写下面的CSS

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

/*To specify extra padding*/
[class*="col-"] {
    float: left;
    padding: 15px;
}

/*Just to add visual effect*/
.left-content{
    background-color: red;
    height: 100px;
}

.right-content{
    background-color: blue;
    height: 100px;
}

上面的CSS所做的是，它为一个div指定了12种不同的大小。现在，正如您在问题中提到的，您希望左侧的内容比右侧的控制面板更大，您可以使用

class=“col-9”

指定左侧内容，使用

class=“col-3”

指定右侧控制面板

左边的内容
右边的内容

现在，当浏览器调整大小并变小时，div将自动进行调整

---

您可以通过一些用于响应性设计的第三方框架来实现这一点。我会推荐Bootstrap。但是，如果你想用艰难的方式，也就是说你自己，那么你可以使用上面的css。

不，我不想让它消失，我希望当我从页面中删除侧边栏（右边的）时，内容div（左边的）扩展到它的全部大小，这样它就不再存在了。好吧，如果我在没有侧边栏的页面上有内容div（左边的）。。i、 e.col-3；我猜我只需要将col-9改为col-12？@AlexRickells是的，你是对的，只要确保你想显示在彼此相邻的所有div总共应该是12，例如，如果你想在屏幕左侧添加一个控制面板，那么你的类应该是。col-3。col-6。col-3（3+6+3=12）@三倍我该怎么做？

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

/*To specify extra padding*/
[class*="col-"] {
    float: left;
    padding: 15px;
}

/*Just to add visual effect*/
.left-content{
    background-color: red;
    height: 100px;
}

.right-content{
    background-color: blue;
    height: 100px;
}

<div class="col-9 left-content">
   Content on left
</div> 

<div class="col-3 right-content">
   Content on right
</div>