Question

我正在尝试创建一个网站模板，我有3个div，我的大小相同，当我使用笔记本电脑在codepen上编辑它时，它看起来完全居中，但当我使用我的显示器（这是一个更大的屏幕）div都转移到了一边。如何让我的div响应屏幕宽度的变化。在这种情况下，如果屏幕很宽，我希望我的div在页面中间聚集在一起，但如果它是笔记本电脑屏幕，我希望div填充空间。

这是一个代码库，可以显示现在的样子：https://codepen.io/chenius/pen/eKvRKp/

其中一个div的代码片段：

.post1{
position: absolute;
width: 392px;
height: 500px;
background-color: #F1F0F0;
margin-top: 50px;
margin-left: 40px;

}

Answer 1

如果您添加了一个codepen，请尝试仅包含您的问题。我已经更新了您的codepen。如果您尝试制作响应式设计，请不要使用px作为大小。如果你尝试使用绝对位置来设置所有块的样式，那么你就无法控制CSS。

尝试使用display: flex结合%宽度和最大宽度，具体取决于您的风格偏好

＆＃13;

#bodyposts {
  background-color: white;
  width: 100%;
  display: flex;
  justify-content: center; 
  /*border: 1px solid black;*/
}
.post { 
  width: calc(100% / 3); 
  max-width: 368px; 
}

＆＃13;

<div id="bodyposts">
  <div class="post1 post">
    <img src="https://photos-5.dropbox.com/t/2/AACOIvsj9S-Od_SOp3CrZNZD9a2-vgB9txeSuP95IDvWhA/12/731836158/jpeg/32x32/1/_/1/2/1-1.jpg/ELC5uLQIGA4gBygH/CN4xmVMBYozkdoVkY_yXluv4Yao68hgbv0V95K7Tjy4?size=2048x1536&size_mode=3" id="post1img"/>
    <p class="text-success">Bootstrap V3.3.6</p>
    <p id="post1para">Morbi sagittis justo a velit placerat ullamcorper quis quis velit. Sed convallis at risus ullamcorper auctor. Praesent quis velit neque. Quisque semper porta nisi vitae suscipit. Duis lectus magna, ornare ac scelerisque.</p>
    <div class="text-center"><button type="button" class="btn btn-success">Button Green</button></div>
  </div>
  <div id="post2" class="post">
    <img src="https://photos-3.dropbox.com/t/2/AAA0wm6tg1X1K7zHZG5l6nZGnfHWobZLJTB4L12PBjLRhQ/12/731836158/jpeg/32x32/1/_/1/2/1-2.jpg/ELC5uLQIGA8gBygH/simGKuHsNbmiQz63msz6lnpI4VntyYBKZScXTOh08PY?size=1280x960&size_mode=3" id="post2img"/><h3 class="text-primary">Responsive Desgn</h3>
    <p id="post2para">Conquer Template is provided by templatemo for free of charge. You can use this template for any kind of website. No credit link is required. All images by Unsplash. Thank you for visiting our website. Please come again!</p>
    <button type="button" class="btn btn-primary">Button Blue</button>
  </div>
  <div id="post3" class="post">
  <img src="https://photos-2.dropbox.com/t/2/AABT_1USaAxiBj120M9ai5jS-hYbSHGkRn0yDJhQeC4rNg/12/731836158/jpeg/32x32/1/_/1/2/1-3.jpg/ELC5uLQIGA8gBygH/APtdBotAnn4vJycbaWyxY84b1TmaxKy3x2JChb8NLOE?size=1280x960&size_mode=3" id="post3img"><h3 id="post3h3">Parallax Scroll</h3>
    <p id="post3para">Morbi sagittis justo a velit placerat ullamcorper quis quis velit. Sed convallis at risus ullamcorper auctor. Praesent quis velit neque. Quisque semper porta nisi vitae suscipit. Duis lectus magna, ornare ac scelerisque.</p>
    <button type="button" class="btn btn-secondary">See Details </button>
  </div>
</div>

＆＃13;

这将根据您的喜好定位块。您可以在原始文件上更新此内容。看看我如何为你的div添加一个className，这样你就可以更快地设置样式。

Answer 2

我看到你正在使用一些Bootstrap类。是否更容易使用Bootstrap网格使其更容易？也许尝试将col-sm-4类用于3列，以使其具有响应性。如果不是Bootstrap，我使用3个div并将它们浮动到左边，宽度为33.3％或33％如果你想要间距然后使用媒体查询将它分成50％div然后100％。

此外，我会尝试定位同一个类，以防止为这些列编写重复的CSS

Answer 3

您可以尝试Responsive Web Design Grid，类似于Bootstrap的@ Trace751建议。

如何根据屏幕宽度响应设计使div移动到中间位置

3 个答案: