Question

我有三个inline-block div，宽度很明确。（它们分别是导航栏，工具栏和应用程序的横幅。）

当页面很宽时，我们需要它们：

[a][b][c]

够容易。但是当页面很窄（移动）时，他们应该去：

[c]
[a]
[b]

那么，我们是否有任何人真正理解float: left＆amp; right在这里提供帮助？

Answer 1

您可以使用media query。例如

div{
 display:inline-block;
 width:33%;
}

@media (max-width: 600px){
 div{
  display:block;
  width:auto;
 }
}

DEMO

Answer 2

以下是答案：

<div style="border: 1px dashed blue; display: inline-block; ">
  <!-- add width: 3em; to see the "mobile phone" version -->
  <div style="float: right; display: inline-block; width: 2em;">c</div>
  <div style="display: inline-block; width: 2em;">a</div>
  <div style="display: inline-block; width: 2em;">b</div>
</div>

没有width: 3em;（模拟狭窄的布局），我们得到了ABC。但是使用width: 3em（或者如果你抬起浏览器窗口），我们会得到CAB。

display：inline-block＆amp;真正的液体布局

2 个答案: