Question

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

我想制作一个网站，当你重新设置窗口时，divbox会自动调整..所以如果它旁边的另一个div是内联的话，它们会被缩小。

我举了第二个问题的例子，我将解释。

这张图片是我希望网站在第一页上看的方式，这样我就可以将内容放在较大div的左侧，然后是右侧的控制面板。

http://i.imgur.com/35ljicH.png

我想这样做，以便当我从实际的html中删除侧边栏时，另一个页面;内容将自动调整到容器的整个长度，即

http://i.imgur.com/fzfZ9Oa.png

如果可以，请帮助我！谢谢！

Answer 1

你可以使用jQuery使它'消失'，如下所示：

`$（document）.ready（function（）{

$('.triger').click(function(){

    $('.container .b').toggle();

    if ($('.b').is(':visible')){
        $('.a').css('width','70%');
    } else { 
        $('.a').css('width','100%');
    }

});

}）;`

应该是这样的：HERE IS A EXAMPLE

Answer 2

大多数现代浏览器都支持媒体搜索@media，当某些条件为真时会自动触发。 Here is an example in which the div auto adjusts themselves.

为了更好地理解它，

写下以下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 class="col-9 left-content">
   Content on left
</div> 

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

现在，当浏览器调整大小并变小时，div会自动调整。

您可以通过用于响应式设计的第三方框架来实现此目的。我会为它推荐Bootstrap。但是如果你想以艰难的方式去做，那就是你可以使用上面的css。

如何自动调整预先设定的div？

2 个答案: