html - 左对齐右对齐div，以防没有媒体查询的空间太少

Question

我正在开发产品详细信息 View 的 HTML/CSS。如果有足够的空间，我想左对齐价格和商品编号 (.Left) 并右对齐两个链接 (.Right)。如果空间太少，我想将所有数据左对齐并将每个信息显示在单独的行上。有没有什么方法可以在没有 JavaScript 和媒体查询的情况下实现这一目标？由于我的产品元素详细信息 View 位于多个嵌套的响应元素中，因此我需要添加几个断点才能右对齐、左对齐、右对齐等，这很不方便。

我的HTML如下:

<div class="Specification">
  <div class="InfoLine">
    <div class="Left">CHF 99.90</div>
    <div class="Right">LINK1</div>
  </div>
  <div class="InfoLine">
    <div class="Left">Article-No: 31-4AB</div>
    <div class="Right">LINK2</div>
  </div>
</div>

感谢您的帮助!

编辑: 现在，我的 CSS 看起来像这样:

.Specification .InfoLine
{
    border: 1px dotted pink;
    clear: both;
    line-height: 40px;
}

    .Specification .InfoLine .Left
    {
        border: 1px dotted green;
        float: left;
        display: inline-block;
        width: 295px;
        max-width: 295px;   
    }

    .Specification .InfoLine .Right
    {
        border: 1px dotted blue;
        display: inline-block;
        min-width: 185px;
        float: left;
        text-align: left;
    }

...产生以下输出:

a) 不正常:Enough space - .右框要右对齐(不仅是框，还有文字)

b) 确定:Not enough space - .Right box 在.Left box 下方左对齐

Answer 1

试试这个:

 .Left{  
  float:left;
  }

 .Right{
  float:right;
  }

fiddle here