如果沒有媒體查詢的空間太小，則左對齊右對齊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;
  }

在這里擺弄