Question

我有一个红色的盒子和一个绿色的盒子，并排，并且居中。当浏览器宽度小于正方形的宽度时，它们会分成不同的行。我如何将它们保持在一起？

（我尝试使用具有组合宽度的容器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

Answer 1

这可以通过多种方式完成，这里是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>

Answer 2

尝试使用Flex-box

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助

Answer 3

尝试使用width: 50%而不是width: 200px。

Answer 4

如果你给它们一个固定的宽度（ex 200 + 200px），当传递div宽度时（移动宽度为375px＆lt; 400px of divs 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>

Here is the link to your code

编辑：

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

screen-width

如何在保持div居中的同时保持div不被打破

4 个答案: