Question

我在页脚中有三个框，div以相等的宽度向左浮动。设计是响应性的，所以我的每个大小都是33％。

但是我想隐藏一个较小的屏幕，这意味着只剩下两个（每个50％）。如何确保填充所需的空间而无需为每个屏幕尺寸声明宽度？

为了清楚起见，如果删除一个表单单元格，我想要与表单元格相同的行为：如果指定了表格宽度，则每个单元格都适合相等的宽度。但浮动的div不会。

Answer 1

您可以隐藏最后一个孩子并以这种方式将框设置为50％宽度。

.box {
  float: left;
  width: 33.3%;
}
@media (max-width: 768px) {
  .box {
    width: 50%;
  }
  .box:last-child {
    display: none;
  }
}

<div class="footer">
  <div class="box">
    Content1
  </div>
  <div class="box">
    Content2
  </div>
  <div class="box">
    Content3
  </div>
</div>

Answer 2

您可以使用CSS3 Flex。但它不适用于旧IE。

#main {
    width: 100%;
    height: 100px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    -webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */    
    flex: 1;
}

@media only screen and (max-width:767px){	
   #main div:last-child{display:none;}
}

<div id="main">
    <div style="background-color:coral;">RED</div>
    <div style="background-color:lightblue;">BLUE</div>
    <div style="background-color:lightgreen;">Green div with more content.</div>
</div>

Answer 3

您可以使用Flexbox位置（在现代浏览器上）或display: table-*;（自IE8起支持的所有位置）

示例：http://codepen.io/anon/pen/BNwXdb

<强>标记

<footer class="flexbox">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</footer>

<footer class="table">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</footer>

<强> CSS

/* Using Flexbox */
.flexbox { display: flex; }
.flexbox div {  flex-grow: 1; }

/* Using display: table-* */
.table { display: table; width: 100%; }
.table div { display: table-cell;}


/* e.g. hide last column when viewport width <= 600px */
@media all and (max-width: 600px) {
    footer div:last-child {
        display: none;
    }
}

这些方法都不需要设置宽度。

如何在响应式视图中按百分比填充剩余宽度？

3 个答案: