Question

我有两个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;
}

Answer 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%;
    }
}

Answer 2

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

您需要的是网格系统。底层网格将使用media queries来获取屏幕大小，您也可以这样做，但是就覆盖边缘情况而言，网格系统会更好，您不必重新发明轮子。

要看一些流行的网格系统：

我谦虚地认为，如果你想做一些简单的事情，骷髅将是最好的起点，因为它会给你一个高效的网格，而不会妨碍你的其他固定特征（如彩色按钮）。

但是，如果你想让你的CSS框架定义你的风格的其他部分，那么可以随意去使用（可以说）更受欢迎的Foundation和Bootstrap。

Answer 3

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

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

Answer 4

#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，然后只需更改断点上希望它们堆叠的项目的顺序

将div与响应式设计对齐

4 个答案: