0

我正在开发产品项目详细信息视图的 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) 不行：足够的空间- .Right 框应该是右对齐的（不仅是框，还有文本）

b) 确定：空间不足- .Right 框在 .Left 框下方左对齐

4

2 回答 2

0

尝试

.selectorName{
   display:inline-block;
}

并从代码中删除 float 属性..

于 2013-08-05T08:55:19.210 回答
0

尝试这个：

 .Left{  
  float:left;
  }

 .Right{
  float:right;
  }

在这里摆弄

于 2013-08-05T09:05:27.200 回答