0

我目前正处于准备我的艺术和设计网站 (www.jamieansell.com) 的最后阶段,我正在使用 One% CSS 网格来保存图形设计和艺术作品页面上的预览图像。

此设置在 Google Chrome 上运行良好,但我最近发现在 Safari 和 Android 上查看网站时,网格被拉伸和扭曲。

我已经对 CSS 进行了摆弄,但无济于事。下面是相关的CSS:

    Common columns definitions
    */
    .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
    float: left;
    margin: 0%; 0 0 0;
    }

    .col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last,        .col8.last, .col9.last, .col10.last, .col11.last, .col12 {
    margin: 0;
}

.col1 { width: 5.5%; margin: -3.1%; }
.col2 { width: 16.8%; margin: -0.1%; }

.col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img {
    width: 100%;
    height: 100%;
    display: block;
}

如果需要,我还可以根据要求发布页面标记。

非常感谢您的帮助!

杰米

<style>
        body {
            margin-top: 1px;
        }

        .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
            background: #ffffff;
            color: #000;
            margin-bottom: 0px;
            text-align: center;
            padding: 0px 0;
        }

        @media all and (max-width: 768px) {
            .onerow {
                margin: 0px 0 100px;
            }
        }
    .col13 {            background: #801255;
            color: #fff;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col101 {           background: #801255;
            color: #fff;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col111 {           background: #801255;
            color: #fff;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col121 {           background: #801255;
            color: #fff;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col21 {            background: #801255;
            color: #fff;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col31 {            background: #801255;
            color: #fff;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col41 {            background: #801255;
            color: #fff;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col51 {            background: #801255;
            color: #fff;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col61 {            background: #801255;
            color: #fff;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col71 {            background: #801255;
            color: #fff;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col81 {            background: #801255;
            color: #fff;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col91 {            background: #801255;
            color: #fff;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
    .col14 {            background: #ffffff;
            color: #000;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col102 {           background: #ffffff;
            color: #000;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col112 {           background: #ffffff;
            color: #000;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col122 {           background: #ffffff;
            color: #000;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col22 {            background: #ffffff;
            color: #000;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col32 {            background: #ffffff;
            color: #000;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col42 {            background: #ffffff;
            color: #000;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col52 {            background: #ffffff;
            color: #000;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col62 {            background: #ffffff;
            color: #000;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col72 {            background: #ffffff;
            color: #000;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col82 {            background: #ffffff;
            color: #000;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}
.col92 {            background: #ffffff;
            color: #000;
            margin-bottom: 1px;
            text-align: center;
            padding: 1px 0;
}

    </style>


    </head>

<body>
<br></br>
    <div class="onepcssgrid-1200">
    <div class="col2"><a class='gallery' href="images/Lucid.jpg" title=""><img src="images/sitsol-prev.jpg"></a></div>
    <div class="col2"><img src="images/domin-prev.jpg"></div>
  <div class="col2"><a class='gallery' href="images/Lucid.jpg" title=""><img src="images/glass-prev.jpg"></a></div> 
  <div class="col2"><a class='gallery' href="images/Pilot-Light-(Detail).jpg" title="Read, Test & Reflect (2006)"><img src="images/rtr-prev.jpg"></a></div>
  <div class="col2"><a class='gallery' href="" title=""><img src="images/gd-inst.jpg"></a></div>
  <div class="col2"><a class='gallery' href="images/Carbon.jpg" title="College of Biomedical Science (2008)"><img src="images/cobs-prev.jpg"></a></div>  
  <div class="col2"><a class='gallery' href="" title="Truth"><img src="images/truth-prev.jpg"></a></div>
  <div class="col2"><a class='gallery' href="" title="Marta Cots School of English (2013)"><img src="images/mc-prev.jpg"></a></div>
  <div class="col2"><a class='gallery' href="images/Reel1.jpg" title="Reel1"><img src="images/reel-prev.jpg"></a></div>
  <div class="col2"><a class='gallery' href="images/Reel1.jpg" title="Join the AAPT"><img src="images/join-prev.jpg"></a></div></div>
       </body>

        </body>
4

0 回答 0