html - 在一个 div 中居中放置一个表单，并在右侧显示另一个缩进的 div

Question

我试图将一个表单居中放在一个 div 中，并在右边有一个稍微缩进的另一个 div，但我无法让元素对齐。

我如何使用 CSS 做到这一点？

此外，如果内容不适合页面，是否可以在新行的中心对齐右侧的 div？

.lander-form {
  margin: auto;
}

.lander-add {
  float: right;
  margin-right: 50px;
}

.container-lander {
  overflow: auto;
  width: 100%;
}

#OEPL_Widget_Form {
  min-width: 200px;
  max-width: 399px;
  margin: auto;
  font-weight: 300;
  background-color: #F9F9F9;
  box-shadow: 5px 5px 5px #888888;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  text-align: left;
  border: 3px solid #d9d9d9;
}

#OEPL_Widget_Form div {
  margin-top: 10px;
  text-align: left;
}

#OEPL_Widget_Form input,
button {
  width: 100%;
  padding: 3px 5px;
}

.OEPL_Widget_Form textarea {
  width: 100%;
  padding: 3px 5px;
  height: 5em;
  text-align: left;
}

<div class="container-lander">
  <div class="lander-form">
    <div class="widget widget_oepl_lead_widget">
      <div align='center' class='LeadFormMsg' style='color:red'></div>
      <form id='OEPL_Widget_Form' class='OEPL_Widget_Form' method='POST' enctype='multipart/form-data'>
        <div style='width: 45%; float:left'>
          <p class='small'><label>First Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
        </div>
        <div style='width: 45%; float:right'>
          <p class='small'><label>Last Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
        </div>
        <div>
        </div>
        <p class='small'><label>Your Message <span style="color: red">*</span> :</label><br><textarea cols="30" rows="5"></textarea></p>
        <p><input type='submit' name='submit' style='' value='Submit' id='WidgetFormSubmit' class=''></p>
      </form>
    </div>
  </div>
  <div class="lander-add">
    <div class="laura" id="laura-935032319"><img width="200" src='http://www.freevectors.net/files/large/10CarsVectorSet.jpg' /></div>
  </div>
</div>

Answer 1

你需要的是float:left;。您想要并排放置的两个 div 是 .lander-form 和 .lander-add。你所拥有的是，.lander-add 设置为 float:right;。这是一个常见的初学者错误。页面的两半都应该是 float:left，您会认为让其中之一 float:right 更有意义，但事实并非如此。

我将 .lander-form 的宽度设为 65%，在边距处展开，并将 .lander-add 的宽度设为“auto”。这应该按照您希望的方式工作，当查看区域变小时或调整大小时，页面的右半部分出现在左下方。当您运行我的代码片段时，请注意下面显示的结果与全尺寸结果页面之间的差异。

.lander-form {
  margin: auto;
  float:left;
  width:65%;
  margin-bottom:20px;
  margin-right:15px;
}

.lander-add {
  float: left;
  min-width:20%;
  width:auto;
}

.container-lander {
  overflow: auto;
  width: 100%;
}

#OEPL_Widget_Form {
  min-width: 200px;
  max-width: 399px;
  margin: auto;
  font-weight: 300;
  background-color: #F9F9F9;
  box-shadow: 5px 5px 5px #888888;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  text-align: left;
  border: 3px solid #d9d9d9;
}

#OEPL_Widget_Form div {
  margin-top: 10px;
  text-align: left;
}

#OEPL_Widget_Form input,
button {
  width: 100%;
  padding: 3px 5px;
}

.OEPL_Widget_Form textarea {
  width: 100%;
  padding: 3px 5px;
  height: 5em;
  text-align: left;
}

<div class="container-lander">
  <div class="lander-form">
    <div class="widget widget_oepl_lead_widget">
      <div align='center' class='LeadFormMsg' style='color:red'></div>
      <form id='OEPL_Widget_Form' class='OEPL_Widget_Form' method='POST' enctype='multipart/form-data'>
        <div style='width: 45%; float:left'>
          <p class='small'><label>First Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
        </div>
        <div style='width: 45%; float:right'>
          <p class='small'><label>Last Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
        </div>
        <div>
        </div>
        <p class='small'><label>Your Message <span style="color: red">*</span> :</label><br><textarea cols="30" rows="5"></textarea></p>
        <p><input type='submit' name='submit' style='' value='Submit' id='WidgetFormSubmit' class=''></p>
      </form>
    </div>
  </div>
  <div class="lander-add">
    <div class="laura" id="laura-935032319"><img width="200" src='http://www.freevectors.net/files/large/10CarsVectorSet.jpg' /></div>
  </div>
</div>