Question

好吧，很难描述我的意思，所以我无法真正搜索它，但我会尝试以一种好的方式解释它（无法上传图片）

我有一个div容器A里面有3个div（A1，A2，A3）和一个div容器B里面还有三个div（B1，B2，B3）这些div容器位于一个可由用户调整的区域中，当有足够空间时它们全部显示在一条线上但是当用户使区域变小时，B3首先被推入第二行，然后B2等。

我现在想要的是，当用户缩小区域时，首先将B的所有元素推到第二行（因为它们属于一起），然后如果区域进一步缩小，B3和A3也会被推下，直到你有所有元素排列在彼此之下

我希望这不会太混乱，也许有人可以告诉我是否以及如何实现这一目标

目前的情况：在

之前 A1 A2 A3 B1 B2 B3

调整大小后

A1 A2 A3 B1 B2

B3

调整大小后

A1

A2

A3

B1

...（在使div非常薄之后，这应该是相同的结果）但是在调整大小之后我想要的第二种情况是：）

A1A2A3

B1B2B3

然后

A1A2

A3

B1B2

B3

所以让内联命令首先在外部div上执行，然后才在内部div上执行 - 希望这是可以理解的

Answer 1

你表示你有一个div A＆amp; div B.

在内部A中，（A1，A2，A3） - >占据屏幕的50％，而在B内部是（B1，B2，B3） - ＆gt;占据屏幕的50％。当屏幕变小时，div B应该像这样分组跳过：

第1行：A（A1，A2，A3）

第2行：B（B1，B2，B3）

由于它们是奇数，因此响应式网站的最佳分布将是100％的所有子div。您可以使用@media。

然而，对于你的div A＆amp; div B在@media内部使用100％，只要3个子div跳过为
第1行：（A1，A2）

第2行：A3

第4行：（B1，B2）

第5行：B3

对于@media，如果你之前没有在CSS文件中使用过它，我们可以引导你找出如何解决这个部分。

我希望我清楚如何同时应用两者。

修改

我通过为你包含@media方法为html和CSS添加了一些div。

.container {
	width: 870px;
}
.group_a {
  float: left;
  margin: 0;
  width: 35%;
}
.group_b {
  float: left;
  margin: 0;
  width: 47%;
}

.money {
  padding: 0px;
}

.value {
  margin: 0px;
  padding: 3px;
  /*border: 1px solid blue;*/
  background-color: #989898;
  border-radius: 5px;
  display: inline-block;
}

.addMoney {
  display: inline;
}

.showMoney {
  display: inline;
  /*float:left;*/
}

/*****  @media Area where you adjust your screen size and put your values accordingly   **************/  

@media only screen and (min-width: 200px) and (max-width: 480px) {
  .group_a {
    width: 100%;
  }
  .group_b {
    margin-top: 1em !important;
    width: 100%;
  }
}

@media only screen and (min-width: 480px) and (max-width: 740px) {}@media screen and (min-width: 601px) and (max-width: 740px) {
  .group_a {
    width: 100%;
  }
    .group_b {
    width: 100%;
    margin-top: 1em !important;
  }
}
  @media only screen and (min-width: 740px) and (max-width: 768px) {
    .group_a {
      width: 100%;
    }
    .group_b {
	margin-top: 1em;
    width: 100%;
  }
  }

  @media only screen and (min-width 769px) and (max-width: 992px) {

    .group_a {
      width: 75%;
    }
    .group_b {
	margin-top: 1em !important;
    width: 100%;
  }
  }

  @media only screen and (min-width: 993px) and (max-width: 1024px) {
  }

<html>
<body>

<div class="container">
<!-- Group A -->
<div class="group_a">
  <div class='money'>
    <div class='showMoney'>
      <div class='value'>C: *amount*</div>
      <div class='value'>S: *amount*</div>
      <div class='value'>G: *amount*</div>
    </div>
  </div>
</div>
<!-- End of Group A -->


<!-- Group B -->
<div class="group_b">
  <div class='addMoney'>
    <input type='text' name='moneyAmount' placeholder='amount' id='moneyAmount' style='width: 55px' />
    <select name='moneyType' id='moneyType'>
      <option value='0'>Copper</option>
      <option value='1'>Silver</option>
      <option value='2'>Gold</option>
    </select>
    <a onclick='addMoney()' class='Add' style='text-decoration:none;'>Add</a>
  </div>
</div>
</div>
<!-- End of Group B -->

</div><!-- End of container  -->

</body>
</html>

Answer 2

正如你在评论中所说的那样，它不是关于div的大小调整或不是窗口。然后你可以通过应用它来解决它 -

.addMoney{
    display:inline-block;
}

.showMoney{
    display:inline-block;
}

你会得到你想要的东西。

除非外部div已经移动，否则显示div inline

2 个答案: