1

超级奇怪：由于某种原因，我的网站的首页布局 (CSS) 在应该居中的移动设备上向右移动？见： http: //www.stylerepublicmagazine.com

有人知道为什么是这样吗？我在其他论坛上看到过这个错误，但似乎没有人对此有可靠的修复。

这是我的模板样式表的主要部分：

#wrapper {
    position:absolute;
    width:100%;
    margin: 0, auto;
    margin-top:60px;

}

#socialmedia {   
float:right;

}

   #topbanner {

    margin-left:180px;
    width:990px;


}

#magnavigation {

    position:absolute;
    margin-top:150px;
    margin-left:150px;

}

#featureslides {
    position:absolute;
    margin-top:240px;
    margin-left:190px;

    width:1000px;
}



div.img
{
  padding-top:40px;
  margin: 0px;
  height: 150px;
  width: 150px;
  float: left;
  text-align: left;
  vertical-align:top;
  padding-right:62px;
}   


div.imglast
{
  padding-top:40px;
  margin: 0px;
  height: 150px;
  width: 150px;
  float: left;
  text-align: left;
  vertical-align:top;

}   


div.img img
{
  display: inline;
  margin: 3px;

}

div.articlename {

padding-top:5px;
font-family:'Oswald', sans-serif;
font-size:1.4em;

}


div.desc
{
  padding-top:5px;
  text-align: left;
  font-family:helvetica;
  font-size:1em;
  font-weight: normal;
  width: 140px;
  margin: 0px;
  padding-bottom:100px;
}


#morefeatures {

margin-top:180px;
float:left;
width:685px;
padding-right:15px;
padding-bottom:20px;


}

#adverts {

    width:300px;
    float:right;
    margin-top:180px;



}


.FrontHeading {

    font-family: 'Oswald', sans-serif;
    font-size:30px;
    padding-bottom:5px;
    }

谢谢，乙

4

3 回答 3

2

您声明了许多margin-left导致元素向右移动的属性。

删除左侧边距之前和之后。

利润 没有边距

于 2013-08-29T02:19:55.630 回答
2

正如其他一些人指出的那样，您只是在 CSS 中使用了太多position: absolute属性，基本上，您已经针对一种分辨率（1440 宽）调整了布局。例如，在我的 1920x1080 分辨率下，您的布局显示在左侧。

您可以通过删除所有position: absolute属性并使用替代品来解决此问题。例如，对于主列，您应该使用margin: 0 auto，它将居中。

我创建了一个您可以使用的布局示例，以了解您要用于布局的各种类型的定位。我基本上使用不同的属性复制了布局（或多或少），这些属性应该跨分辨率和设备进行缩放。

小提琴

HTML

<div id='wrapper'>
    <div id='banner'>
        Your logo
        <div id='social'>FACEBOOK | TWITTER</div>
    </div>
    <div id='slides'><img src='http://placekitten.com/500/200'/></div>
    <div class='news'>News item 1</div>
    <div class='news'>News item 2</div>
    <div class='news'>News item 3</div>
    <div class='news'>News item 4</div>
    <div class='news last'>News item 5</div>
    <div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
    <div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
    <div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
    <div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
    <div style='clear: both'></div>
</div>

CSS

#wrapper {
    width: 500px;
    margin: 0 auto;
    font: 18px sans-serif;
}
#banner {
    background: #8888ff;
    padding: 20px;
    margin-bottom: 5px;
}
#social {
    float: right;
    margin-top: -10px;
    font-size: 50%;
}
#slides {
    margin-bottom: 5px;
}
.news {
    background: #88ff88;
    display: inline-block;
    *display: inline; /* IE8- hack */
    zoom: 1; /* IE8- hack */
    margin-right: 10px;
    width: 78px;
    text-align: center;
    padding: 5px;
}
.news.last {
    margin-right: 0;
}
.blog {
    margin-top: 8px;
    clear: both;
}
.blog .entryimg {
    float: left;
    margin-right: 10px;
}

结果

使用上述 CSS 和 HTML 的结果

于 2013-08-29T02:45:40.753 回答
0

我认为 CSS 的绝对位置太多了。

将这几个 CSS 内容更改为居中。

#wrapper {
    width: 100%;
    margin: 0 auto;
    margin-top: 60px;
}

#topbanner {
    margin-left: 180px;
    width: 990px;
    margin: 0 auto;
}

#magnavigation {
    margin-top: 150px;
    margin-left: 150px;
    margin: 0 auto;
}

#featureslides {
    margin-top: 240px;
    margin-left: 190px;
    width: 1000px;
    margin: 0 auto;
}

我建议你重建你的部分，因为它很混乱，很难从我所看到的情况中控制。

于 2013-08-29T02:08:47.137 回答