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

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

Answer 1

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

Answer 2

如果您想要一个响应性好的网站，您应该尝试使用CSS3媒体查询。

CSS3媒体查询

和一个很好的网页设计教程

响应Web设计