如果没有媒体查询的空间太小，则左对齐右对齐div

Question

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

我的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）不正确： 空间不足 -右框应右对齐（不仅框，而且文本）

b）确定： 没有足够的空间 -.Left框在.Left框下方左对齐

Answer 1

尝试

.selectorName{
   display:inline-block;
}

并从代码中删除float属性。

Answer 2

尝试这个：

 .Left{  
  float:left;
  }

 .Right{
  float:right;
  }

在这里摆弄