在窗口调整大小时成对移动div

Question

这对CSS大师来说应该很简单，但我真的无法实现这一目标。有4个框，示例代码：

<div id="wrapper">
    <div id="firstPair">
        <div style="width: 200px; float: left"></div>
        <div style="width: 200px; float: left"></div>
    </div>
    <div id="secondPair">
        <div style="width: 200px; float: left"></div>
        <div style="width: 200px; float: left"></div>
    </div>
</div>

当窗口宽度小于800时，只移动最右边的div，留下3在顶部，1在下一行。

我希望后两者成为一对页面。 2在顶部，2在底部，即使在彼此旁边有3个空间。

Answer 1

您需要为firstPair和secondPair元素设置样式

div[id$="Pair"] {
  display: inline-block;
  float: left;
}

<div id="wrapper">
    <div id="firstPair">
        <div style="width: 200px; float: left">s</div>
        <div style="width: 200px; float: left">d</div>
    </div>
    <div id="secondPair">
        <div style="width: 200px; float: left">f</div>
        <div style="width: 200px; float: left">g</div>
    </div>
</div>

还有一个缩短html的解决方案，但还有一些使用css

div[id$="Pair"] {
  display: inline-block;
}

[id$="Pair"] > div {
  width: 200px;
  float: left;
  background: lightgreen;
}
#wrapper {
  text-align: center;
}

<div id="wrapper">
    <div id="firstPair">
        <div>s</div>
        <div>d</div>
    </div>
    <div id="secondPair">
        <div>f</div>
        <div>g</div>
    </div>
</div>

div[id$="Pair"] {
  display: inline-block;
  margin: 0;
}

[id$="Pair"] > div {
  display: inline-block;
  width: 200px;
  margin: 2px 0;
  background: lightgreen;
}
#wrapper {
  text-align: center;
}

<div id="wrapper">
    <div id="firstPair">
        <div>1</div>
        <div>2</div>
    </div>
    <div id="secondPair">
        <div>3</div>
        <div>4</div>
    </div>
</div>

Answer 2

大概是BFC。

您也可以浮动容器：

＆＃13;

＆＃13;

container.Resolve<IEnumerable<IHandler>>();

＆＃13;

#wrapper> div {
  float:left;
  }

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是我的解决方案。我倾向于在完全响应的环境中工作，因此这将定位它们并在移动设备上做出完全响应。我也隔离了css，内联颜色仅用于演示。

＆＃13;

＆＃13;

<style>
div#firstPair {
	width: 100%;
	max-width:400px;
	float: left;
}
div#firstPair div{
	width: 50%;
	float: left;
}
div#secondPair {
	width: 100%;
	max-width: 400px;
	float: left;
}
div#secondPair div{
	width: 50%;
	float: left;
}
</style>

＆＃13;

<div id="wrapper">
    <div id="firstPair">
        <div style="background-color: blue;">first_1</div>
        <div style="background-color: green;">first_2</div>
    </div>
    <div id="secondPair">
        <div style="background-color: red;">second_1</div>
        <div style="background-color: orange;">second_2</div>
    </div>
	<div style="clear: both;"></div>
</div>

＆＃13;

＆＃13;

＆＃13;