Question

我有两个共享父容器的内联div。 div的宽度为49％，以使它们水平对齐。我想要做的是在将父容器调整到特定宽度后。这两个div就好像它们是块元素一样，占据了一条新线并占据了容器的100％。我不想使用bootstrap，因为这是我需要的唯一功能，它似乎很容易模拟，只需要一些见解。这是基本布局

void WindowWidget::on_ComboBox_currentIndexChanged(int index) 
{ 
    name = sender()->objectName();
    /* here change the corresponding integer in the current
       indexes array */
}

Answer 1

原则很简单：

＆＃13;

.container > div {
  width: 50%;
  float: left;
}
@media (max-width: 800px) {
  .container > div {
    width: 100%;
    float: none;
  }
}

/* the css from this point on is not important, i just added it for clarity */

.container > div {
  text-align: center;
  background-color: #eee;
  border: 1px solid white;
  padding: 20px;
  box-sizing: border-box;
}

＆＃13;

<div class="container">
  <div class="cell">
    First cell
  </div>
  <div class="cell">
    Second cell
  </div>
</div>

＆＃13;

800px是布局更改的点。您可以根据需要拥有尽可能多的@media个查询。以下是您可以使用的media features的完整列表。

如何模拟自举网格的适应性

1 个答案: