css - 响应式网页设计样式*更新*

Question

在尝试使我的网站在响应式网页设计中工作方面，我还是个新手。在我尝试在不同设备上查看 class="label" 后，有没有办法让我对齐？我试过这个:

这非常有效。但是，当我尝试在提供纵向屏幕的不同设备上查看时，结果是这样的:

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

update!!!!

<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="grid_1_of_4 images_1_of_4" 的宽度长，即使文本很长，它也应该在 div 中很好地分词。

Answer 1

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