Question

我试图将一个表格放在div中，并在右边有另一个div略微缩进但我不能让元素排成一行。

如何使用CSS执行此操作？

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

我将.lander-form的宽度设为65％，在边距上展开，并为.lander-add＆＃34; auto＆＃34;设置了宽度。这应该按照您希望的方式工作，当查看区域较小或调整大小时，页面的右半部分显示在左下方。当您在下面显示的结果和完整尺寸的结果页之间运行我的代码段时，请注意区别。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

使用flex通常是处理布局的好方法。在.container-lander div上尝试将这些项目对齐，并将它们垂直居中（此外，当没有足够的空间将它们放在一起时，这也会将项目包裹起来）：

<强> CSS：

.container-lander {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
}

这是一个live example（JSFiddle）。

将一个表单置于div中，并在右侧显示另一个div

2 个答案: