当窗口缩放时，父div不对齐中心

时间：2016-05-23 01:03:55

标签： html css

每当我将窗口重新调整尺寸/调整到较小尺寸（智能手机大小）时，所有三个内部div（.left .center .right）的红色，绿色，蓝色分别相互低于中心。请参阅附带的截图以了解。每当窗口缩小时，我希望所有这三个div都位于主.container div（粉红色）的中心。非常感谢您的投入。

Screenshot 

html,body {
  width: 100%;
  left: 0px;
  top: 0px;
  margin: 0px;
  height: 100%;
}
.container {
  width: auto;
  left: 0px;
  top: 0px;
  float: none;
  width: auto;
  max-width: auto;
  position: relative;
  background-color: rgba(216, 86, 112, 0.5);
  height: 100%;
  margin-top: auto;
  margin-right: 5%;
  margin-left: 5%;
  display: block;
  right: 0px;
}
.top {
  width: 100%;
  left: 0px;
  top: 0px;
  background-color: rgba(204, 51, 0, 1);
  height: 10%;
  position: relative;
  margin: 0px;
  text-align: center;
}
.left {
  float: left;
  height: auto;
  width: 331px;
  background-color: rgba(255, 0, 0, 1);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  left: auto;
  top: 0px;
}
.center {
  float: left;
  height: auto;
  width: 331px;
  background-color: rgba(0, 255, 0, 1);
  margin-left: 0px;
  margin-right: auto;
  position: relative;
  left: 0px;
}
.right {
  float: left;
  height: auto;
  width: 331px;
  background-color: rgba(0, 0, 255, 1);
  margin-left: 0px;
  margin-right: auto;
  position: relative;
  left: 0px;
  top: 0px;
}
<div class="container">
  <div class="top"></div>

  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="center">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>
</div>

3 个答案:

答案 0 :(得分：0)

我的方法是为css设置单独的代码，以便在满足条件时覆盖代码。为此，您将决定在更改之前想要的最大宽度，并添加代码：

 @media only screen and (max-width: 1187px)
        {
            new css here
        }

对于您的特定项目，您只需更改浮动和边距（以及您想要的宽度（此处为1187）），这样：

@media only screen and (max-width: 1187px)
            {
            .left {
margin-right:auto;
margin-left:auto;
float:none;
}
.center {
margin-right:auto;
margin-left:auto;
float:none;
}
.right {
margin-right:auto;
margin-left:auto;
float:none;
}

            }

答案 1 :(得分：0)

UPD。 父级中心的三个区块

我已经看到关于三个街区的冷却＆lt;它们的中心位置为- - -。这是我的解决方案。

html, body {
  margin: 0px;
  height: 100%;
}
.container {
  background-color: rgba(216, 86, 112, 0.5);
  height: 100%;
  margin: 0 5%;
  text-align: center;
}
.top {
  width: 100%;
  background-color: rgba(204, 51, 0, 1);
  height: 10%;
}
.left,
.center,
.right {
  display: inline-block;
  width: 331px;
}
.left   { background-color: rgba(255, 0, 0, 1); }
.center { background-color: rgba(0, 255, 0, 1); }
.right  { background-color: rgba(0, 0, 255, 1); }
<div class="container">
  <div class="top"></div>

  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="center">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>
</div>

媒体查询

我更喜欢移动优先设计。第一步是调整智能手机的网页。然后确定屏幕变宽时发生的变化。然后描述更宽屏幕的变化。等等。

让我们计算屏幕的宽度，其中三个块将适合同一行。三个331px宽的块占用了993px。这是屏幕宽度的90％。 10％落在容器的边缘。因此

993px x 100% / 90% = 1104px

所以我为这个断点添加了一个媒体查询。

此外，我已经注释掉了解决所描述问题所不需要的部分。请检查结果。

html, body {
  margin: 0px;
  height: 100%;
  /*
  width: 100%;
  left: 0px;
  top: 0px;
  */
}
.container {
  background-color: rgba(216, 86, 112, 0.5);
  height: 100%;
  margin-right: 5%;
  margin-left: 5%;
  /*
  margin-top: auto;
  display: block;
  right: 0px;
  width: auto;
  left: 0px;
  top: 0px;
  float: none;
  width: auto;
  max-width: auto;
  position: relative;
  */
}
.top {
  width: 100%;
  background-color: rgba(204, 51, 0, 1);
  height: 10%;
  text-align: center;
  /*
  left: 0px;
  top: 0px;
  position: relative;
  margin: 0px;
  */
}
.left,
.center,
.right {
  width: 331px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1104px) {
  .left,
  .center,
  .right {
    float: left;
    height: auto;
    width: 331px;
    /*
    position: relative;
    left: auto;
    top: 0px;
    */
  }
}
.left   { background-color: rgba(255, 0, 0, 1); }
.center { background-color: rgba(0, 255, 0, 1); }
.right  { background-color: rgba(0, 0, 255, 1); }
<div class="container">
  <div class="top"></div>

  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="center">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>
</div>

答案 2 :(得分：0)

这是你想要的吗？ https://jsfiddle.net/xofoh5yp/

刚删除浮动并留下位置样式。

<div class="container">
  <div class="top"></div>

  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="center">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>
</div>

html,body {
  width: 100%;
  left: 0px;
  top: 0px;
  margin: 0px;
  height: 100%;
}
.container {
  width: auto;
  left: 0px;
  top: 0px;
  float: none;
  width: auto;
  max-width: auto;
  position: relative;
  background-color: rgba(216, 86, 112, 0.5);
  height: 100%;
  margin-top: auto;
  margin-right: 5%;
  margin-left: 5%;
  display: block;
  right: 0px;

}
.top {
  width: 100%;
  left: 0px;
  top: 0px;
  background-color: rgba(204, 51, 0, 1);
  height: 10%;
  position: relative;
  margin: 0px;
  text-align: center;
}
.left {
  height: auto;
  width: 331px;
  background-color: rgba(255, 0, 0, 1);
  margin-left: auto;
  margin-right: auto;
  position: relative;

}
.center {

  width: 331px;
  background-color: rgba(0, 255, 0, 1);
  margin-left: auto;
  margin-right: auto;
  position: relative;

}
.right {

  height: auto;
  width: 331px;
  background-color: rgba(0, 0, 255, 1);
  margin-left: auto;
  margin-right: auto;
  position: relative;

}

以下是代码，如果您希望它们在一行中： 小提琴：https://jsfiddle.net/xofoh5yp/1/

基本上，添加容器DIV然后添加％宽度。

<div class="container">
  <div class="top"></div>
  <div>
  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="center">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>

  <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
  </div>
  </div>
</div>

html,body {
  width: 100%;
  left: 0px;
  top: 0px;
  margin: 0px;
  height: 100%;
}
.container {
  width: auto;
  left: 0px;
  top: 0px;
  float: none;
  width: auto;
  max-width: auto;
  position: relative;
  background-color: rgba(216, 86, 112, 0.5);
  height: 100%;
  margin-top: auto;
  margin-right: 5%;
  margin-left: 5%;
  display: block;
  right: 0px;

}
.top {
  width: 100%;
  left: 0px;
  top: 0px;
  background-color: rgba(204, 51, 0, 1);
  height: 10%;
  position: relative;
  margin: 0px;
  text-align: center;
}
.left {
  height: auto;
  width: 33%;
  background-color: rgba(255, 0, 0, 1);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  float:left;

}
.center {

  width: 33%;
  background-color: rgba(0, 255, 0, 1);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  float:left;

}
.right {

  height: auto;
  width: 34%;
  background-color: rgba(0, 0, 255, 1);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  float:left;

}

保证金的另一个小提琴：https://jsfiddle.net/xofoh5yp/2/

相关问题
最新问题