Q

響應式網頁設計樣式更新

2015-10-21 103 views 0 likes

0

我仍然嘗試使我的網站在響應式網頁設計中工作。在嘗試在不同設備上查看它之後，我有沒有辦法讓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內？例如，如果文本的寬度大於文本的寬度，那麼即使文本很長，也應該在div內很好地打破文字。

2015-10-21 SitiNuraini Yakob

+0

您需要使用網格系統並設計您的佈局，並牢記各種屏幕尺寸。強烈建議您查看引導程序：http://getbootstrap.com/ –

+0

您需要設置容器的寬度併爲兒童使用浮動屬性 –

+0

這實際上是針對響應文本發生的。 –

A

回答

0

如果你想要一個負責任的網站，你應該嘗試使用CSS3媒體查詢

CSS3 media queries

和自適應網頁設計的一個很好的教程

Responsive Web Design

2015-10-21 04:40:22 Nutto

+0

https://jsfiddle.net/V4u5X/880/我不確定如何添加媒體查詢。但基於我的例子，它應該如何完成？ –

+0

@SitiNurainiYakob這[Jsfiddle]（https://jsfiddle.net/nutto/V4u5X/881/）怎麼樣，但它不是嚴格意義上的響應式網頁設計。 – Nutto

+0

可悲的是，不工作:( –

1

這是響應佈局。您可以更改有關該區域的媒體查詢。您只需簡單地寫出類display:table-row

2015-11-19 05:55:45

+0

嗨！我有更新我的問題。你能指導我如何解決它？@EastEnd –

相關問題