响应式网页设计造型*更新*

Question

我仍然擅长使我的网站在响应式网页设计中工作。我尝试在不同设备上查看后，有没有办法让class="label"对齐？我试过这个：

这完美无缺。但是，当我试图在提供纵向屏幕的不同设备上查看时，结果是这样的：

https://jsfiddle.net/V4u5X/880/

  

更新!!!!

<div class="columnshop">
                        <div class="grid_1_of_4 images_1_of_4">
                            <div class="grid_preview">
                                <a href=""><img src="" alt=""></a>
                            </div>
                            <div class="price-details">
                                <span><a href="">Cabbage ( hidden,enabled)asndbbsddbsbsba</a></span>
                                <div class="price-number">$5.00</div>
                                <button id="addToCart" class="buttonlink">ADD TO CART</button>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </div>

https://jsfiddle.net/V4u5X/920/

如何在 div 中修复文本？例如，如果文字的长度超过 class =＆＃34; grid_1_of_4 images_1_of_4＆＃34; 的宽度，即使文字很长，也应该很好地分词在div内。

Answer 1

这是响应式布局。您可以更改有关该区域的媒体查询。您只需编写类 display:table-row

即可

Answer 2

如果您想要一个自适应网站，您应该尝试使用CSS3媒体查询

CSS3 media queries

和响应式网页设计的好教程

Responsive Web Design