Question

我想了解如何在窗口最小化的情况下将两个内容集中到某个阈值，然后将内容放在右下方。

在此页面中，左侧是图像，右侧是描述。当页面最小化到某个宽度大小时，它会在下面输入名称和描述。

http://artloft.co/products/wacho-rice-mill

因此这个问题有三个部分：
1）如何动态地最小化div（我认为宽度％） 2）当宽度扩大/最大化时，它们如何居中？ 3）当宽度减小/最小化时，如何将一个div放在另一个上面。

我在这里找到了答案的一部分，但没有其他两个，我不明白如何将它们合并。 float the div when reducing the windows screen size

非常感谢

Answer 1

使用媒体查询识别屏幕分辨率。

<强> More info on media queries here

I've made a simple demo for you to inspect the code

<强> HTML

<div class="center">
    <div class="left"></div>
    <div class="right"></div>
    <div class="clear"></div>
</div>

这有一个包装器center，它在一定分辨率后将两个div居中。并且div clear在两个浮动元素之后清除空间。

<强> CSS

.left{width:100%; height:100px; background:green;}
.right{width:100%; height:100px; background:blue; float:left;}
.clear{clear:both;}

@media (min-width: 600px) {
  .left{width:50%; height:100px; background:green; float:left;}
  .right{width:50%; height:100px; background:blue; float:left;}
}

@media (min-width: 900px) {
  .center{margin:0 auto; width:800px;}
}

顶级CSS适用于最小的屏幕分辨率。之后媒体查询，检查屏幕分辨率，当识别出这些分辨率时，CSS变为活动状态。

因此，对于您的最小屏幕分辨率（在我的示例中，所有内容都低于600px），您的CSS是：

.left{width:100%; height:100px; background:green;}
.right{width:100%; height:100px; background:blue; float:left;}
.clear{clear:both;}

然后第一个媒体查询检查屏幕分辨率是否大于600px，如果是这种情况，则添加以下类

  .left{width:50%; height:100px; background:green; float:left;}
  .right{width:50%; height:100px; background:blue; float:left;}

下一个媒体查询检查屏幕是否大于900px，如果是这种情况，则添加以下类

.center{margin:0 auto; width:800px;}

See the working code in a fiddle

调整右下方屏幕的大小以查看不同的查询。

Answer 2

调整窗口大小以查看差异，或在firefox中按ctrl + shift + m

Fiddle Demo

* ,body{
  margin:0;
  padding:0;    
}
img{
    max-width:100%;
}
#container{
padding:10px;
  text-align:left;
}
.content{
    text-align:justify;
}
.left_image{
  float:left;
  margin:0 20px 10px 0;
  }
@media only screen and (max-width:767px){
  #container{
padding:10px;
  text-align:center;
    margin:0 auto;
}
  .left_image{
    float:none;
    margin:10px auto;
  }
  .content{
    text-align:justify;
  }
}

Answer 3

你是否很难使用Jquery？你可以用jQuery改变css属性，作为一个例子（这很难，不是你可以使用的代码，我不记得那些明确的陈述）

if($( window ).width() < 500px) {
$('#div1').css(do what ever you want to the css)
}

中心两个并排的div，在减小窗口屏幕尺寸时浮动div

3 个答案: