集装箱对齐问题

Question

我试图使文本容器在我的网站堆栈时，屏幕是较窄和对齐时，屏幕是更大的。目前，当我改变屏幕的宽度时，我的容器就到处都是。

我试图改变特定容器的大小，但是它并没有解决这个问题。

我该怎么解决这个问题？

编辑:很抱歉大家搞混了，我想要zag布局，但是当我改变屏幕大小时，我想要它堆叠。。

​

#center_container {
  background-color: whitesmoke;
  width: 81.4%;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 15px;
  padding-top: 11px;
  font-family: 'Open Sans';
  font-weight: 700;
  word-spacing: 0.5px;
  margin-left: 9%;
  margin-top: 10px;
}

#container_left {
  background-color: whitesmoke;
  width: 40%;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 11px;
  padding-bottom: 15px;
  font-family: 'Open Sans';
  font-weight: 700;
  word-spacing: 0.5px;
  float: left;
  margin-left: 9%;
  margin-top: 20px;
}

#container_right {
  background-color: whitesmoke;
  width: 40%;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 11px;
  margin-left: 20px;
  padding-bottom: 15px;
  font-family: 'Open Sans';
  font-weight: 700;
  word-spacing: 0.5px;
  float: left;
  margin-right: 5%;
  margin-top: 20px;
}

#new_container_left {
  background-color: whitesmoke;
  width: 40%;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 11px;
  padding-bottom: 15px;
  font-family: 'Open Sans';
  font-weight: 700;
  word-spacing: 0.5px;
  float: left;
  margin-left: 9%;
  margin-top: 20px;
}

#new_container_right {
  background-color: whitesmoke;
  width: 40%;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 11px;
  margin-left: 20px;
  padding-bottom: 15px;
  font-family: 'Open Sans';
  font-weight: 700;
  word-spacing: 0.5px;
  float: left;
  margin-right: 9%;
  margin-top: 20px;
}

<div id="container_left">
  <h1>About us</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore m agna aliqua. Pretium nibh ipsum consequat nisl vel pre tium lectus quam. Sit amet facilisis magna etiam tempor orci. Sapien eget mi proin
    sed libero. Elementum tempus egestas sed sed risus pretium. Ultrices tincidunt arcu non sodales neque sodales. Neque viverra justo nec ultrices dui sapien eget mi. Magna eget est lorem ipsum dolor sit amet consectetur. Praesent semper feugiat nibh
    sed pulvinar proin gravida hendrerit lectus. Nunc sed velit dignissim sodales ut eu sem integer. Mauris rhoncus aenean vel elit scelerisque. Morbi blandit cursus risus at.</p>
</div>
<div id="container_right">
  <h1>Our Services</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore m agna aliqua. Pretium nibh ipsum consequat nisl vel pre tium lectus quam. Sit amet facilisis magna etiam tempor orci. Sapien eget mi proin
    sed libero. Elementum tempus egestas sed sed risus pretium. Ultrices tincidunt arcu non sodales neque sodales. Neque viverra justo nec ultrices dui sapien eget mi. Magna eget est lorem ipsum dolor sit amet consectetur. Praesent semper feugiat nibh
    sed pulvinar proin gravida hendrerit lectus. Nunc sed velit dignissim sodales ut eu sem integer. Mauris rhoncus aenean vel elit scelerisque. Morbi blandit cursus risus at.</p>
</div>
<div id="new_container_left">
  <h3 style="text-align: center">Aerial Photography Solutions</h3>
  <img style="margin-left:20px" src="https://www.adorama.com/alc/wp-content/uploads/2017/10/shutterstock_368306438-1-825x465@2x.jpg" height="50%" width="90%"><br><br>
</div>
<div id="new_container_right">
  <h3 style="text-align:center">Ground Penetrating Radar Solutions</h3>
  <img style="margin-left:20px" src="https://plsservices.com.au/wp-content/uploads/2017/10/drone-GPR.jpg" height="50%" width="90%">
</div>
<div id="new_container_left">
  <h3 style="text-align:center">Thermal Solutions</h3>
  <img style="margin-left:20px" src="https://www.amelioronslaville.com/wp-content/uploads/2017/02/camera-thermique-radiometrique-pour-drone.jpg" height="50%" width="90%">
</div>
<div id="new_container_right">
  <h3 style="text-align:center">Aerial Survey and Mapping Solutions</h3>
  <img style="margin-left:20px" src="https://www.morningagclips.com/wp-content/uploads/2017/04/MOD-79047_DroneDeploy-FieldScannerJPG.jpg" height="50%" width="90%">
</div>

</html>

​

​

​

Answer 1

当我运行您的代码时，在大屏幕上容器是垂直排列的，当我缩小屏幕大小时，它们也会以zig顺序排列。我所理解的是，当屏幕尺寸变窄时，你希望文本容器垂直地从同一列开始排列，当屏幕尺寸变宽时，则以锯齿状排列。

在这种情况下，下面是代码(使用媒体查询：mediaqueries.asp)或教程：(https://www.youtube.com/watch?v=3tLb3i7GB38&list=PL4cUxeGkcC9g9Vh9MAA-XKnfJsWZnPZFw)

css：

/* for narrow screen size : stack fashion */
        @media only screen and (max-width: 768px) {
            #container_left, #new_container_left {
                background-color: whitesmoke;
                width: 40%;
                padding: 11px 30px 15px 30px;
                font-family: 'Open Sans';
                font-weight: 700;
                word-spacing: 0.5px;
                margin-top:20px;
            }
            #container_right, #new_container_right {
                background-color: whitesmoke;
                width:40%;
                padding: 11px 30px 15px 30px;
                font-family: 'Open Sans';
                font-weight: 700;
                word-spacing: 0.5px;
                margin-right:5%;
                margin-top:20px;
            }

        }

/* for wider screen sizes : zig-zig fashion */
        @media only screen and (min-width: 768px) { 
            #center_container {
                background-color: whitesmoke;
                float: left;
                font-family: 'Open Sans';
                font-weight: 700;
                word-spacing: 0.5px;
                padding: 11px 30px 15px 30px;
                margin-left:9%;
                margin-top:10px;
            }
            #container_left ,#new_container_left {
                float: left;
                background-color: whitesmoke;
                font-family: 'Open Sans';
                font-weight: 700;
                word-spacing: 0.5px;
                padding: 11px 30px 15px 30px;
                margin-left: 9%;
                margin-top:20px;
            }
            #container_right, #new_container_right {
                float: left;
                background-color: whitesmoke;
                font-family: 'Open Sans';
                font-weight: 700;
                word-spacing: 0.5px;
                padding: 11px 30px 15px 30px;
                margin-right:5%;
                margin-top:20px;
            }
       }

Answer 2

代码的问题很简单。在默认情况下没有定义某些CSS属性，并为每个类声明了独占。

要演示修复，请尝试将所有id的类更改为center_container。

<div id="center_container">
  <h1>About us</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore m agna aliqua. Pretium nibh ipsum consequat nisl vel pre tium lectus quam. Sit amet facilisis magna etiam tempor orci. Sapien eget mi proin
    sed libero. Elementum tempus egestas sed sed risus pretium. Ultrices tincidunt arcu non sodales neque sodales. Neque viverra justo nec ultrices dui sapien eget mi. Magna eget est lorem ipsum dolor sit amet consectetur. Praesent semper feugiat nibh
    sed pulvinar proin gravida hendrerit lectus. Nunc sed velit dignissim sodales ut eu sem integer. Mauris rhoncus aenean vel elit scelerisque. Morbi blandit cursus risus at.</p>
</div>
<div id="center_container">
  <h1>Our Services</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore m agna aliqua. Pretium nibh ipsum consequat nisl vel pre tium lectus quam. Sit amet facilisis magna etiam tempor orci. Sapien eget mi proin
    sed libero. Elementum tempus egestas sed sed risus pretium. Ultrices tincidunt arcu non sodales neque sodales. Neque viverra justo nec ultrices dui sapien eget mi. Magna eget est lorem ipsum dolor sit amet consectetur. Praesent semper feugiat nibh
    sed pulvinar proin gravida hendrerit lectus. Nunc sed velit dignissim sodales ut eu sem integer. Mauris rhoncus aenean vel elit scelerisque. Morbi blandit cursus risus at.</p>
</div>
<div id="center_container">
  <h3 style="text-align: center">Aerial Photography Solutions</h3>
  <img style="margin-left:20px" src="https://www.adorama.com/alc/wp-content/uploads/2017/10/shutterstock_368306438-1-825x465@2x.jpg" height="50%" width="90%"><br><br>
</div>
<div id="center_container">
  <h3 style="text-align:center">Ground Penetrating Radar Solutions</h3>
  <img style="margin-left:20px" src="https://plsservices.com.au/wp-content/uploads/2017/10/drone-GPR.jpg" height="50%" width="90%">
</div>
<div id="center_container">
  <h3 style="text-align:center">Thermal Solutions</h3>
  <img style="margin-left:20px" src="https://www.amelioronslaville.com/wp-content/uploads/2017/02/camera-thermique-radiometrique-pour-drone.jpg" height="50%" width="90%">
</div>
<div id="center_container">
  <h3 style="text-align:center">Aerial Survey and Mapping Solutions</h3>
  <img style="margin-left:20px" src="https://www.morningagclips.com/wp-content/uploads/2017/04/MOD-79047_DroneDeploy-FieldScannerJPG.jpg" height="50%" width="90%">
</div>

</html>

这样做会产生一个以为中心的视图，您一直在努力实现这个视图：

​

​

所面临问题的根本原因：

您正在将自定义值设置为属性，如margins、width、padding等，这些属性导致布局中的不一致性。这是一个更大的架构问题，您可以使用下面介绍的方法来解决这个问题。

你能做些什么来改善这种情况？

建议1:

尝试定义一个https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors，例如：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

建议2:将所有的div封装在父标记中，就像<body>一样。它可以是节标记、文章标记。我只是举一个例子，因为这里没有看到完整的HTML代码。

并为该标记应用默认属性：

body{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
}

更新：

为了给你一个精确的解决方案我做了一些改进。您可以尝试下面的CSS，它现在应该可以工作了

*{
  width: 81.4%;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 15px;
  padding-top: 11px;
  margin-left: 20px;
  font-family: 'Open Sans';
}

#center_container {
  background-color: whitesmoke;
  font-weight: 700;
  word-spacing: 0.5px;
  margin-top: 10px;
}

#container_left {
  background-color: whitesmoke;
  font-weight: 700;
  word-spacing: 0.5px;
  float: left;
  margin-top: 20px;
}

#container_right {
  background-color: whitesmoke;
  width: 40%;
  font-weight: 700;
  word-spacing: 0.5px;
  float: left;
  margin-right: 5%;
  margin-top: 20px;
}

#new_container_left {
  background-color: whitesmoke;
  font-weight: 700;
  word-spacing: 0.5px;
  float: left;
  margin-top: 20px;
}

#new_container_right {
  background-color: whitesmoke;
  font-weight: 700;
  word-spacing: 0.5px;
  float: left;
  margin-right: 9%;
  margin-top: 20px;
}

Answer 3

我成功地修好了它。谢谢你的回答。@Aar您的代码修复了90%的问题，而问题的另一部分是我的br标签。

:)