相对于彼此定位两个可变宽度的内联块答案

【问题标题】：Positioning two variable-width inline-blocks relatively to each other相对于彼此定位两个可变宽度的内联块
【发布时间】：2015-12-14 09:03:41
【问题描述】：

我有两个可变宽度的元素，我正在尝试按以下方式定位：

如果它们在屏幕上或在它们的公共容器中彼此相邻，我希望它们与它的相对侧对齐（即第二个对齐到右侧）。
如果他们不这样做，我希望他们一个在另一个之上，但都向左对齐。

一些简单的事情：

<div class="container">
  <div style="display: inline-block;">
    I'm a variable width left element
  </div>
  <div style="display: inline-block; float:right;">
    I'm right-floating if there's space
  </div>
</div>

处理第一种情况，但显然当容器足够小以使第二个 div 呈现在第一个下方时，它仍然是右浮动的，这不是我想要的。

这甚至可以用纯 CSS 实现吗？由于未知/可变宽度，我无法使用媒体查询。

【问题讨论】：

CSS 有很多漏洞（用纯 CSS 无法表达的理想布局）。如果您将第一个框向左浮动，可能是可能的（也可以使用display:block），但我发现通常需要一点 Javascript。

标签： html css

【解决方案1】：

这种布局和行为是可能的没有媒体查询和纯CSS使用flexbox。

HTML

<!-- horizontal alignment when two boxes fit -->
<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
</div>

<!-- vertical alignment when two boxes don't fit -->
<div class="container">
    <div class="box box3"><span>1</span></div>
    <div class="box box4"><span>2</span></div>
</div>

CSS

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 700px; /* for demo only; can be relative length, as well */
}

.box1 { width: 100px; }
.box2 { width: 150px; }
.box3 { width: 400px; }
.box4 { width: 500px; }

DEMO

注意事项：

当有足够的空间容纳同一行上的两个可变宽度元素时，它们会在容器的两端与justify-content: space-between 对齐。
当没有足够的空间容纳两个元素时，它们会用 flex-wrap: wrap 和 align-left 包装，因为 justify-content: space-between 规则会在元素单独时左对齐在行上。

请注意，所有主流浏览器都支持 flexbox，except IE 8 & 9。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在此处的左侧面板中发布您的 CSS：Autoprefixer。

【讨论】：