水平滾動條時的中心內容

-1

我正在設計一個可在桌面和移動瀏覽器上使用的自適應html模板。在內容中，我有一個固定的表，它正在縮小它的字體大小（標題和單元格），直到使用媒體查詢的某個限制。低於這個限制，表格太密集而不能在該字體大小下可讀，所以我們更願意保留它，即使它在移動瀏覽器的可見部分之外。水平滾動條時的中心內容

對於大多數手機和臺式機來說，這不是問題，因爲內容與中心對齊，並且有一個水平滾動條用於查看視口外部的表格部分。

但iPhone上的Safari試圖在可見光區，以適應一切其實在右移左邊的內容並留下一個很大的空白區域，正好符合表所示。

在圖像的下方，橙色矩形代表視口，綠色代表內容，「Div」矩形表格不適合在視口內。請注意，在左側的圖像中，Div超出的部分不可見（我對此解決方案很滿意）。 enter image description here

我該如何在css中實現左側圖像的結果？

這些都是HTML的相關部分：

<body> 
    <div class="container"> 
     <div class="row section"> 
      <div class="col content"> 
       <table width="100%"> 
        <tbody> 
         <tr> 
          <td rowspan="2"> 
           <div align="center" class="Style1"> 
            title 
           </div> 
          </td> 
          <!-- Many Other <td></td> HERE --> 
         </tr> 
         <!-- Many Other <tr></tr> HERE --> 
        </tbody> 
       </table> 
      </div> 
     </div> 
    </div> 
</body>

和CSS的：

/*Grid System*/ 
.col { 
    padding: 0 1.5em; 
} 
.row .row { 
    margin: 0 -1.5em; 
} 
.row:before, .row:after { 
    content: ""; 
    display: table; 
} 
.row:after { 
    clear: both; 
} 
@media only screen { 
    .col { 
     float: left; 
     width: 100%; 

     -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
       box-sizing: border-box; 
    } 
} 


/* Mobile really small dispalys */ 
@media only screen and (min-width: 2em) { 

    table { 
     font-size: 0.4em; 
    } 

} 

/*Mobile normal diaplay*/ 
@media only screen and (min-width: 12em) { 

    p, ul { 
     font-size: 0.875em; 
    } 

    table { 
     font-size: 0.7em; 
    } 

    .feature:first-child, 
    .info:first-child { 
     border-right: 1px dotted #aaa; 
    } 

    .container { 
     padding: 1em; 
    } 

    h1 { 
     font-size: 2em; 
    } 

    h2 { 
     font-size: 1.625em; 
    } 

} 

/*Tablets*/ 
@media only screen and (min-width: 54em) { 
    .content { 
     border: none; 
     margin-bottom: 0; 
     /*border-left: 1px dotted #aaa;*/ 
    } 

    .info:first-child { 
     border: none; 
    } 

    h1 { 
     font-size: 2.5em; 
    } 

    h2 { 
     font-size: 1.8em; 
    } 
} 

/*Desktop*/ 
@media only screen and (min-width: 76em) { 
    .info:first-child { 
     border-right: 1px dotted #aaa; 
    } 

    h1 { 
     font-size: 3em; 
    } 

    h2 { 
     font-size: 2em; 
    } 
} 

/* General styles*/ 
body { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    margin: 0; 
} 

.container { 
    margin: 0 auto; 
    max-width: 90em; 
    padding: 1em 0; 
} 

.row.section { 
    margin-bottom: 4em; 
} 

.content { 
    margin-bottom: 1.5em; 
}

來源

2015-05-13 Leonardo

爲此，您需要p加上你的'css'！ –

將不勝感激，有投票的人的意見。這個問題很簡單並且切合實際。如果有什麼遺漏或沒有問好讓我知道 – Leonardo

@GuruprasadRao我會盡力做到 – Leonardo

這足以設置：

.container { 
    overflow: auto; 
}

來源

2015-05-28 14:46:09 Leonardo

您可能需要最小寬度設置爲你的元素

來源

2015-05-13 12:38:32

你應該澄清'min-width'將如何修復這裏的東西;一些樣本CSS不會出錯。 –

如果你的表格寬度：100％，設置最小寬度將不允許表格縮小那麼最小寬度的大小.. 我有多少理解你有小桌面縮小以適應視圖端口的問題？ –

水平滾動條時的中心內容

回答

相關問題