如何进行预设的自动调整div？ [英] How to make auto adjusting divs that are pre-set?

问题描述

我想问一个问题，我想知道一段时间了。

我想创建一个网站，其中divbox的自动调整时间你换了一个窗口..所以他们的大小会下降，如果旁边的另一个div是内联的。

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

这张图片是我希望网站在第一页上显示的内容，这样我就可以在较大的div中留下内容，然后在控制面板上在这个尺寸的权利。

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

我想这样做是为了当我从实际的html中移除边栏时，为另一页;内容将自动调整到容器的全长，即

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

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

解决方案

大多数现代浏览器都支持media queury @media 当某些条件成立时自动启动。 这是一个div自动调整的例子。

为了更好地理解它，

写下面的CSS，

  / *对于手机：* / 
 [class * =col-] {
 width：100％; 
} 
 @media仅屏幕和（最小宽度：768px）{
 / *桌面：* / 
 .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％;} 
} 
 
 / *指定额外填充* / 
 [class * =col-] {
 float：left; 
 padding：15px; 
} 
 
 / *仅用于添加视觉效果* / 
 .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> 
剩下的内容
< / div> 
 
< div class =col-3 right-content> 
正确的内容
< / div> 
  

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

您可以通过一些用于响应式设计的第三方框架来实现此目的。我会为它推荐Bootstrap。但是如果你想以自己的方式来完成，那么你可以使用上面的CSS。

I would like to ask a question that I wanted to know for some time now..

I'd like to make a website where the divbox's auto adjust when you rezise the windows.. and so they be sized down if another div next to it is inline.

I have made an example of the second question which I will explain.

This picture is how I want the website to look on the first page, so that I can have the content on the left in the bigger div and then the control panel on the right at that size.

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

And I want to make it so that when I remove the the sidebar from the actual html, for another page; the content will automatically resize to the full length of the container, i.e.

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

Please help me if you can! Thank you!

解决方案

Most modern browsers supports media queury @media which fires automatically when some conditions are true. Here is an example in which the div auto adjusts themselves.

To better understand it,

Write following 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;
}

What the above CSS does is that it specifies 12 different sizes for a div. Now as you mentioned in your question you want the content on the left bigger compared to the control panel on the right you can specify the left content with class="col-9" and the right control panel with class="col-3"

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

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

Now when the browser is resized and made small the div will automatically adjust themselves.

You can do this via some 3rd party framework used for responsive designs. I would recommend Bootstrap for it. But if you want to do it the hard way i.e. on your own then you can use the above css.

这篇关于如何进行预设的自动调整div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！