響應股利表

我試着從本網站生成一個div表：http://divtable.com/generator/響應股利表

然而，一切工作除了股利表的響應罰款。當最小化瀏覽器寬度時，我希望它完全響應。例如，我只希望它在移動設備上顯示每行兩個項目。

下面是我使用它的代碼：

.divTable{ 
 
    display: table; 
 
    width: 100%; 
 
text-align: center; 
 

 
} 
 
.divTableRow { 
 
    display: table-row; 
 
} 
 
.divTableHeading { 
 
    background-color: #ffffff; 
 
    display: table-header-group; 
 
} 
 
.divTableCell, .divTableHead { 
 
    border: 1px solid #ffffff; 
 
    display: table-cell; 
 
    padding: 3px 10px; 
 
} 
 
.divTableHeading { 
 
    background-color: #ffffff; 
 
    display: table-header-group; 
 
    font-weight: bold; 
 
} 
 
.divTableFoot { 
 
    background-color: #ffffff; 
 
    display: table-footer-group; 
 
    font-weight: bold; 
 
} 
 
.divTableBody { 
 
    display: table-row-group; 
 
}

<div class="divTable"> 
 
<div class="divTableBody"> 
 
<div class="divTableRow"> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone4Parts.png?11283548812375177185" alt="" width="200" height="200" /> <br />iPhone 4 Parts</div> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone4sParts.jpg?3165596616796717679" alt="" width="200" height="200" /> <br />iPhone 4s Parts</div> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone5Parts.jpg?8873682526308780626" alt="" width="200" height="200" /> <br />iPhone 5 Parts</div> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone5cwhite.jpg?647508470520316270" alt="" width="200" height="200" /> <br />iPhone 5c Parts</div> 
 
</div> 
 
<div class="divTableRow"> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone5sParts.jpg?8873682526308780626" alt="" width="200" height="200" /> <br />iPhone 5s Parts</div> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhoneSEParts.jpg?647508470520316270" alt="" width="200" height="200" /> <br />iPhone SE Parts</div> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone6Parts.jpg?18059291597630475032" alt="" width="200" height="200" /> <br />iPhone 6 Parts</div> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone6PlusParts.jpg?9610561940146358986" alt="" width="200" height="200" /> <br />iPhone 6 Plus Parts</div> 
 
</div> 
 
<div class="divTableRow"> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone6sParts.jpg?11014928492319611631" alt="" width="200" height="200" /> <br />iPhone 6s Parts</div> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone6sPlusParts.jpg?8400309241132689431" alt="" width="200" height="200" /> <br />iPhone 6s Plus Parts</div> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone7Parts.jpg?7760410424665462960" alt="" width="200" height="200" /> <br />iPhone 7 Parts</div> 
 
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone7PlusParts.jpg?9544342566201088259" alt="" width="200" height="200" /> <br />iPhone 7 Plus Parts</div> 
 
</div> 
 
</div> 
 
</div>

來源

2017-01-31 Nedi

。你爲什麼不使用網格？ – Sebastian

我建議你使用的引導，我用引導CSS樣式重新設計你的代碼。我用於大型桌面的col-md-3類。當屏幕大於992px時，該類爲每個div提供25％的寬度，因此每個「行」div在該設置寬度上將有4列。當屏幕小於992px，但大於750px時，我應用了col-sm-6，讓屏幕只有2個圖像用於行。 bootstrap.css文件中col-md-6的寬度設置爲50％。引導程序中的最大列數是12，col-sm-6表示6列跨度。對於我使用媒體查詢的小型設備，最大尺寸爲320像素，智能手機將只顯示1行的項目。媒體查詢可讓您爲特定的窗口寬度設置自定義css規則。您可以檢查下面的代碼，並學會在許多網站上或通過以下鏈接使用引導程序：

http://getbootstrap.com/

當您使用bootsrap，你需要在你的頭文件，包括您的main.css前將文件鏈接到引導CDN或本地引導文件。您應該在樣式表之前包含此引導程序文件，以便您可以使用自定義規則覆蓋此規則。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <link href="main.css" rel="stylesheet" /> 
    </head> 

    <body> 

    <div class="row"> 
     <div class="col-md-3 col-xs-6 divTableCell"><img src="https://cdn.shopify.com/s/files/1/1606/7271/files/iPhone4Parts.png?11283548812375177185" alt="" width="200" height="200" /> <br />iPhone 4 Parts 
     </div> 
     <div class="col-md-3 col-xs-6 divTableCell"><img src="https://cdn.shopify.com/s/files/1/1606/7271/files/iPhone4sParts.jpg?3165596616796717679" alt="" width="200" height="200" /> <br />iPhone 4s Parts 
     </div> 
     <div class="col-md-3 col-xs-6 divTableCell"><img src="https://cdn.shopify.com/s/files/1/1606/7271/files/iPhone5Parts.jpg?8873682526308780626" alt="" width="200" height="200" /> <br />iPhone 5 Parts 
     </div> 
     <div class="col-md-3 col-xs-6 divTableCell"><img src="https://cdn.shopify.com/s/files/1/1606/7271/files/iPhone5cwhite.jpg?647508470520316270" alt="" width="200" height="200" /> <br />iPhone 5c Parts 
     </div> 
    </div> 

    </body> 
</html>

這是你引導包括CSS

.divTableCell, .divTableHead { 
    border: 1px solid #ffffff; 
    /*display: table-cell; 
    padding: 3px 10px;*/ 
    text-align: center; 
} 

@media (max-width: 320px) { 
    .divTableCell { 
     width: 100%; 
    } 
}

來源

2017-01-31 14:50:08

感謝這很有幫助 – Gary

謝謝你，祝你好運！ –

如果你只是想要一個響應表....使用引導程序庫，創建

<table class="table-responsive"> 
<tbody class="table"></tbody> 
</table>

注意：在Pixel中設置寬度和高度始終不是一個好的做法，如果您希望特定div有響應。因爲Pixel設置了固定寬度和高度的div，不管大小如何都不會改變大小。

你可以嘗試引導庫，或寬度和高度設置爲百分比

width="100%"

來源

2017-01-31 14:25:52

回答

相關問題