0

商品アイテムの詳細ビューの HTML/CSS を開発しています。スペースに余裕がある場合は、価格と商品番号を左揃え (.Left) に、2 つのリンクを右揃え (.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) OK ではありません:十分なスペース- .Right ボックスは右揃えにする必要があります (ボックスだけでなく、テキストも)

b) OK:十分なスペースがありません- .Right ボックスが .Left ボックスの下に左揃えで配置されています

4

2 に答える 2

0

試す

.selectorName{
   display:inline-block;
}

コードから float プロパティを削除します。

于 2013-08-05T08:55:19.210 に答える