当一个 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>

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>

当一个 div 有 margin auto 时如何并排对齐两个 div

How to align two divs side by side when one has margin auto

html

css

margin