Question

http://i.imgur.com/Veauoig.png

我目前正在尝试研究如何使“From£”文本与上面的按钮保持相同的位置。该页面具有响应性，因此我无法将文本保留在一个位置。

到目前为止我使用的CSS -

element.style {position: absolute; width: 97%;}

我将每个'From£'部分放在他们自己的班级中。不确定是否有更简单的方法？

<div class="price2">From £300</div>

任何帮助都会很棒。谢谢！

Answer 1

您可以使用CSS3 :: after伪选择器。

按钮类：

position: relative;

然后你必须写一些石灰：

.button-class::after {
   content: 'From £300';
   background: transparent;
   height: 1%;
   width: 3%;
   position: absolute;
   top: 20px;
   left: 0px;
}

显然，您必须随意改变height: 1%; width: 3%;和top: 20px; left: 0px;！

Answer 2

为价格和按钮添加元素的容器，以便它们彼此保持上下文。 http://jsfiddle.net/05orkj1a/

.prices{
    width: 100%;
 }
.price-column{
   display: table-cell;
   width: 33%;
   text-align: center;
   margin: 0 auto;
   padding: 0 5px;
}

<div class="prices">
    <div class="price-column">
        <button>Bass</button>
        <div class="price2">From £65</div>
    </div>
    <div class="price-column">
        <button>Mid</button>
        <div class="price2">From £300</div>
    </div>
    <div class="price-column">
        <button>Treble</button>
        <div class="price2">From £715</div>
    </div>
</div>

你也可以浮动左边的列，使它们垂直折叠，因为屏幕会缩小相同的html。只需更改边距或填充，具体取决于您希望它们间隔多远

http://jsfiddle.net/z6agt11e/

.prices{
    width: 100%;
    overflow: hidden;
 }
.price-column{
   display: block;
   float: left;
   text-align: center;
   padding: 5px 5px;
}

Answer 3

您还可以添加外部容器，然后为每个按钮价格集创建一个内部容器。

以下是HTML代码：

<div class="outter">
<div class="block">
   <div class="button">button1</div>
      <div class="price2">From £65</div>
      </div>
   <div class="block">
      <div class="button">button2</div>
      <div class="price2">From £300</div>
   </div>
   <div class="block">
      <div class="button">button3</div>
      <div class="price2">From £715</div>
   </div>
</div>

这里是CSS：

.outter{
width:100%;    
} 

.block{
width:33%;
background-color: yellow;
float:left;
text-align: center;
}

这里有一个jsfiddle： http://jsfiddle.net/SoniaGM/ej4mdwx9/1/

希望它有所帮助。

响应文本使用Button固定定位

3 个答案: