Question

我正在努力使我的网站之一响应... :) 在标准视图（pc）中，我有div container名为"article"，其中包含2个cols上的更多div，所有这些都包含width: 350px。调整屏幕大小，我想将div "article"置于一个col中心。
我尝试了很多方法，包括margin: 0 auto, display: inline-block，display: table，但不起作用，div总是飘向＆＃34;文章＆＃34;的左边。 :(
在媒体查询中使用此方法：

＆＃13;

left: 50%
margin-left: 175px;

＆＃13;

＆＃13; 当"article"有width: 707px时，它会将div居中;（708只是我需要两个cols上的div，包括一些填充），
但是在707px值下减小宽度，中心将被丢失，因为margin-left具有固定值！

Answer 1

你只需margin: 0 auto;你的div，就像这样：

＆＃13;

.container {background-color:red;}
.content {background-color:aqua;width: 350px;margin:10px auto;}

＆＃13;

<div class="container">
  <div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eleifend eu leo quis euismod. Phasellus blandit suscipit ipsum non pretium. In facilisis scelerisque sodales. Integer posuere nunc eget orci tincidunt, et dapibus dui porta. Duis pellentesque commodo mi, non congue erat imperdiet ac. Morbi facilisis accumsan dapibus. Quisque metus risus, ullamcorper ut faucibus ac, elementum in arcu. Aliquam vulputate sapien sed ullamcorper dignissim. Cras aliquet nisl nibh, a feugiat tortor pellentesque ac. Donec id mollis ante, sit amet ultricies velit.
  </div>
</div>

＆＃13;

Answer 2

我首先在您的子列上使用百分比。固定宽度会导致不必要的问题。

然后在您的移动布局上，让您的子列全宽并移除浮动。这将使列堆叠在一起。

.article .subColumn {
    width:48%;
    float:left;
}
@media screen only and (max-width:480px) {
    .article subColumn {
        float:none;
        width:100%;
        padding:0 25px;
    }
}

在响应div容器中宽度为350px的中心div

2 个答案: