我对 CSS 有疑问。当浏览器在小屏幕上时,我没有得到任何关于图像位置的线索,图像没有响应。我试过 position:relative;
并手动设置边距,但没有解决。
这是我的 HTML 代码:
<div id="home-product-slider" class="home-section" style="display:none;">
<div class="col-sm-8 col-sm-offset-2">
<div class="row mini-product-wrapper">
<div class="col-sm-12">
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/home_product_glasku_capuccino.png" alt="" class="img-responsive img-home-product ihp-thumb">
<div class="product-box" style="margin-top:200px">
<div class="product-hero-box text-left">
<h4 style="color:white;">
<br/>GLASKU CAPPUCINO<br/>
</h4>
<div class="product-box-text">
<p>Glasku Cappuccino hadir dalam kemasan 165ml dalam variasi rasa kopi susu dengan harga yang affordable dengan tidak mengorbankan kualitas produk yang dihasilkan. Praktis dan menyegarkan untuk dinikmatin.</p>
<a href="/index.php/our-products/glasku/#0" class="small" style="color:white;">Read more >></a>
</div>
</div>
</div>
</div>
</div>
</div>
这是我的 CSS:
#home-product-slider .img-home-product.ihp-thumb { width: 45%; position: absolute; top: 0;right: 0;}
谢谢!
最佳答案
为什么不尝试在您的 css 文件中使用@media 查询。这是链接,引用这个并尝试实现(http://www.w3schools.com/cssref/css3_pr_mediaquery.asp)
关于css - 解决 CSS 图像位置命中小屏幕上的文本内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31178920/