将 div 与响应式设计对齐答案

【问题标题】：Aligning divs with responsive design将 div 与响应式设计对齐
【发布时间】：2015-07-07 20:21:23
【问题描述】：

我有 2 个 div，我正试图以某种方式使其具有响应性。当屏幕宽度达到一定宽度时，我基本上希望右 div 位于左 div 之上。现在他们正在设置拆分容器的 100% 宽度。

左边是表格，右边是内容。我希望表单顶部的内容适合移动屏幕的宽度。我喜欢如何设置在桌面/笔记本电脑设置上查看的宽度。我希望这是有道理的。

有没有办法用 CSS 做到这一点，或者我需要 JQuery 吗？如果不清楚，请告诉我。

CSS

#left {
float:left;
width:65%;
border-radius: 25px;
background-color: #F8F8F8 !important;   
}

#right {
float:right;
width:35%;
background-color: white !important;
padding-left: 40px;
}

【问题讨论】：

请显示您的标记。您的移动（全宽）样式在哪里？您可能希望对宽度使用媒体查询。
使用CSS media queries和SO

标签： javascript jquery html css

【解决方案1】：

如果我理解正确，这个 JSFiddle 正在做你想做的事。

http://jsfiddle.net/isherwood/wgbn8c0d/1/ （感谢 iSherwood 修复 CSS）

这是一种只使用 CSS 和 CSS 的 @media 查询的方法：

#left {
    float: left;
    border: 1px solid black;
    width:calc(65% - 26px);
    border-radius: 25px;
    background-color: #F8F8F8 !important;
}
#right {
    border: 1px solid black;
    float: right;
    width:calc(35% - 40px);
    background-color: white !important;
    padding-left: 40px;
}
@media screen and (max-width: 500px) {
    #left {
        display: block;
        width: 100%;
    }
    #right {
        display: block;
        width: 100%;
    }
}

【讨论】：

右栏应该在移动设备的顶部。浮动可能是必要的。 jsfiddle.net/isherwood/wgbn8c0d/1
谢谢大家。这正是我想要的。
@user4739731 我已经更新了小提琴（感谢@isherwood）将右侧放在顶部。
再次感谢您的快速回复。
为什么不用box-sizing 而不是calc()？

【解决方案2】：

理想情况下，您可以使用媒体查询来检测您希望它们堆叠的屏幕宽度。

例如，在那个宽度上说它是 768 像素。然后，您可以删除浮点值并将宽度设置为 100%。如果您标记您的 HTML 以便内容的右侧部分在左侧之前编码，那么它自然会首先呈现在左侧上方。

【讨论】：

【解决方案3】：

#container {
  display: flex;
}

#left {
  order: 1;
  width:65%;
  border-radius: 25px;
  background-color: #F8F8F8 !important;   
}

#right {
  order: 2;
  width:35%;
  background-color: white !important;
  padding-left: 40px;
}

@media only screen and (max-width: 767px) {
  #left, #right { width: 100%; }
  #left { order 2; }
  #right { order: 1; }
}

如果您不必支持 IE9 及以下版本，您可以使用display: flex，然后只需更改您希望它们堆叠的断点上项目的顺序

【讨论】：

【解决方案4】：

简短的回答是不，你不需要 jQuery，是的，你可以使用 CSS。

您需要的是一个网格系统。底层网格将使用media queries 来获取屏幕尺寸，您也可以这样做，但网格系统在覆盖边缘情况方面会更好，您不必重新发明轮子。

几个流行的网格系统来看看：

以我的拙见，如果您尝试做一些简单的事情，Skeleton 将是最好的起点，因为它会给您一个高效的网格，而不会妨碍您使用其他自以为是的功能（如彩色按钮）。

但是，如果您希望您的 CSS 框架定义您样式的其他部分，请随意使用（可以说）更流行的 Foundation 和 Bootstrap。

【讨论】：