如何保持潜水从打破，同时保持他们的中心

我有一个红色框和一个绿色框，并排，居中。当浏览器的宽度小于正方形的宽度时，它们会分成单独的行。我如何让他们在一起?

(我尝试使用一个容器div与他们的组合宽度，它的工作是保持他们在一起，但他们不再居中。)

有什么建议吗?

代码:

  <body>
    <div style='text-align:center;font-size:0'>
        <div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
        <div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
    </div>
  </body>

可以在这里运行:https://plnkr.co/edit/2De21ziNmaeleFmkPuPF?p=preview

这可以通过多种方式实现，这里是3:

使用min-width

<div style='text-align:center;font-size:0; min-width: 400px'>
  <div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
  <div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>

使用white-space: nowrap

<div style='text-align:center;font-size:0; white-space: nowrap'>
  <div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
  <div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>

使用display: flex;

<div style='text-align:center;font-size:0;display: flex;justify-content: center'>
  <div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
  <div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>

尝试使用Flex-box

.parent{
display:flex;
  border:1px solid green;
  width:500px;
}
.parent div{
background:green;
  width:100px;
  height:100px;
  margin:20px;
}

<div class="parent">
   <div>cell1</div>
  <div>cell2</div>
  </div>

希望能有所帮助

如果你给他们一个固定的宽度(ex 200+200px)，当这个div宽度通过时(ex mobile width为375px <(400px的div sum)，最后一个元素滑动到下一行。

每个宽度为35%，看起来就像你想要的200px。

  <body>
    <div style='text-align:center;font-size:0; width: 100%;'>
      <div style='display:inline-block;background-color:red; width:35%;height:50px'></div>
      <div style='display:inline-block;background-color:green; width:35%;height:50px'></div>
    </div>
  </body>

这是你的代码的链接

编辑:

这是一个有用的链接，可以更好地理解宽度选项取决于设备的宽度，我鼓励你深入了解w3schools，或其他平台，在那里你可以更好地学习如何使用css和js操作html元素。

屏幕宽度

尝试在盒子上使用width: 50%而不是width: 200px。

相关内容

最新更新

热门标签：