当一个div使用了margin auto时，如何使两个div并排对齐？

Question

我有一个div，它具有margin:auto的属性，因此可以浮动在页面中央。该页面还有一个缩放功能，可缩放到该元素上，并且我希望该元素上有一个min-margin-left的属性。

我尝试创建一个具有固定宽度的新元素，但是当我在这两个元素上使用float:left时，它不起作用，具有固定宽度（蓝色）的元素会浮动在另一个元素（红色）的上方。

我尝试查看其他问题，但它们没有涉及到具有margin:auto属性的div，而且关于min-margin的问题也没有涉及到两个元素。

这是我的当前代码：

.main_field {
  width: 1000px;
  margin: 20px auto;
  height: 100px;
  border: none;
  display: inline-block;
  padding: 75px;
  background-color: red;
}

<div style="background-color: blue; height: 100px; display: inline-block; width: 50px;"></div>
<iframe class="main_field "></iframe>

- Andrei

Answer 1

问题在于显示 - 要使您的居中工作，需要将元素设置为块级元素：

.papertextfield {
  width: 200px;
  margin: auto;
  background-color: red;
  display: block;
}

<iframe name="textfield" id="textareathingy" class="papertextfield"></iframe>

为了伪造最小边距，您可以使用带填充的容器：

.papertextfield {
  width: 200px;
  margin: auto;
  background-color: red;
  display: block;
}

.container {
  padding-left: 60px;
  padding-right: 60px;
  background-color: blue;
}

<div class="container">
  <iframe name="textfield" id="textareathingy" class="papertextfield"></iframe>
</div>

- kabanus