将两个并排的 div 居中，减小 windows 屏幕尺寸时浮动 div答案

【问题标题】：Center two divs that are side-by-side, Float the div when reducing the windows screen size将两个并排的 div 居中，减小 windows 屏幕尺寸时浮动 div
【发布时间】：2016-09-18 04:10:10
【问题描述】：

我想知道如何将两个内容居中，直到窗口宽度最小化时的某个阈值，它会将内容放在右下方。

在这个页面中，左边的图片和右边的描述。当页面最小化到一定的宽度大小时，它会将名称和描述放在下面。

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

所以这个问题分为三个部分：
1) 如何动态最小化 div (我在想一些宽度 %)
2) 当宽度扩大/最大化时它们如何居中
3) 当宽度减小/最小化时如何将一个 div 放在另一个之上。

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

非常感谢

【问题讨论】：

谷歌媒体查询

标签： html css formatting

【解决方案1】：

调整窗口大小以查看差异或在 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;
  }
}

【讨论】：

【解决方案2】：

这是使用媒体查询来识别屏幕分辨率来完成的。

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 变为活动状态。

因此，对于您的最小屏幕分辨率（在我的示例中，所有分辨率均低于 600 像素），您的 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

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

【讨论】：

【解决方案3】：

你对使用 Jquery 有过困难吗？例如，您可以使用 jQuery 更改 css 属性（这很难，不是您可以使用的代码，我不记得这么清楚的语句）

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

【讨论】：