Question

超级怪异：出于某种原因，我的网站的首页布局（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;
    }

谢谢，乙

Answer 1

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

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

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

The Fiddle

<强> 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;
}

<强>结果

Result using the above CSS and HTML

Answer 2

您宣布了很多margin-left属性，导致元素向右移动。

在删除左边的边距之前和之后。

Margin No margins

Answer 3

我认为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;
}

我建议你重新构建你的部分，因为它很糟糕，很难控制我看到的部分。

在iPhone / iPad上CSS布局转向右？

3 个答案:

The Fiddle