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

【问题标题】：responsive web design styling *updated*响应式网页设计样式*更新*
【发布时间】：2016-01-19 23:03:25
【问题描述】：

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

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

更新！！！

<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 内很好地分词。

【问题讨论】：

您需要使用网格系统并在设计布局时牢记各种屏幕尺寸。强烈建议您查看引导程序：getbootstrap.com
你需要设置容器的宽度并为孩子使用浮动属性
这实际上发生在响应式文本中。
是的，它不适合我的
@SitiNurainiYakob 试试 bootstrap getbootstrap.com 真的没那么糟糕。我大约 6 个月前开始使用它，并且对它非常满意。

标签： css text responsive-design styling text-alignment

【解决方案1】：

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

【讨论】：

嗨！我已经更新了我的问题。你能指导我如何解决它吗？ @EastEnd

【解决方案2】：

如果你想要一个响应式网站，你应该尝试使用 CSS3 媒体查询

CSS3 media queries

以及一个很好的响应式网页设计教程

Responsive Web Design

【讨论】：

jsfiddle.net/V4u5X/880 我不确定如何添加媒体查询。但是根据我的例子，应该怎么做呢？
@SitiNurainiYakob 这个Jsfiddle 怎么样，但它不是严格意义上的响应式网页设计。