Question

如果您访问此link，则可以在页面中央看到以下图片：

在此网站上，如果您将鼠标悬停在窗口右上方的货币符号上，则可以看到下拉选项，更改下拉选项后，您可以看到“通常在3-5个工作日内发送”文本旁边价格 - 我希望这个文字低于价格，如下图所示：

这是我正在使用的CSS，无论我如何尝试，都无法获得所需的结果。有人可以请我帮忙吗？谢谢。

font-family: 'Roboto Condensed', sans-serif;
    color: #636363;
    font-size: 14px;
    line-height: 1.5;
}

Answer 1

on

.price-info

起飞

max-width: 31%;

这样就占据了整行

Answer 2

尝试使用浮动：离开p标签。这应该可以解决您网页上的一些问题，并可能会解决您在错误区域显示文字时遇到的问题。

您可能还应该在问题中添加一些html和css。如果没有它，就会很难回答。

Answer 3

＆＃13;

$(document).ready(function() {
  $('.qty-btn').click(function(){
    if($('.qty').val() > 0)
    {
      $('.deliveryMsg').text('Usually Delivered in 3-5 days.');
    }else {
         alert("Qty must be greater than 0");
    }

  });
});

＆＃13;

body {
  background: silver;
  }

.section {
  height: 400px;
  width: 500px;
  margin-bottom: 20px;
  background: #FFFFFF;
  margin-left: 100px;
  padding: 10px;
  }

/* used for demo purposes */
.product-img {
  background: silver;
  opacity: 0.5;
  height: 150px;
  width: 150px;
  /* center the img within the col */
  display: block;
  margin: auto;
  }

.col-left {
  width: 40%;
  }

.col-right {
  float: right;
  margin-top:-165px;
  text-align: left;
  width: 60%;
  }

.title {
  font-weight: bold;
  }

.price {
  margin-top: -5px;
  margin-bottom: -5px;
  color: blue;
  }

input[type="text"] {
  width: 50px;
  }

span {
  font-size: small;
  font-weight: bold;
  }

input[type="button"] {
  background: orange;
  color: #FFFFFF;
  }

.qty {
  width: 20px !important;
  }

.wishlist {
  width: 130px !important;
  }

.deliveryMsg {
  font-weight: bold;
  opacity: 0.5;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
  <div class="col-left">
    <div class="product-img"></div>
  </div>
  <div class="col-right">
    <p class="title" >Golden Waves Marble Texture Apple IPhone 4 Phone Case</p>
    <hr />
    <ul>
      <li>Device: Apple iPhone 4</li>
      <li>Design: Marbles</li>
      <li>Material: Polycarbonate Hard Case</li>
    </ul>
    <hr />
    <h3 class="price">499.00</h3>
    <hr />
    <form>
      <span>Check Delivery Availability <input type="text" placeholder="Enter PIN Code" /> <input type="button" value="CHECK" /></span>
      <br /><br />
      <span>Qty: <input class="qty" type="text" /> <input class="qty-btn" type="button" value="ADD TO CART" /> <input class="wishlist" type="text" placeholder="SAVE TO WISHLIST" /></span>
      <br /><br />
      <span class="deliveryMsg"></span>
    </form>
    
  </div>
  
</div>

<div class="section">
  <h2>Product Description</h2>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum       has been the industry's standard dummy text ever since the 1500s, when an unknown           printer took a galley of type and scrambled it to make a type specimen book. It has         survived not only five centuries, but also the leap into electronic typesetting,             remaining essentially unchanged. It was popularised in the 1960s with the release of         Letraset sheets containing Lorem Ipsum passages, and more recently with desktop             publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>

＆＃13;

希望有所帮助！

显示低于价格的文字

3 个答案: