html - 显示在右栏中的消息框

Question

我想设计响应式联系表单，其中的布局是姓名、电子邮件、主题字段在一列中，消息字段在另一列中。尽管我使用了 width as 50%，但我无法使该消息字段出现在另一列中。这是演示

http://jsbin.com/vuxojuqeve/edit?html,css,output

代码

#responsive-form {
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.form-row {
  width: 100%;
}

.form-row input {
  margin: 10px 0;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.button {
  float: left;
  background: #CA0002;
  color: #fff;
  text-transform: uppercase;
  border: none;
  padding: 8px 20px;
  cursor: pointer;
}

input[type="text"],
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box
}

.half-size {
  width: 50%;
}

<div id="responsive-form" class="clearfix">
  <div class="half-size">
    <div class="form-row">
      <div class="column">
        <input type="text" name="name" class="form-control">
      </div>
    </div>
    <div class="form-row">
      <div class="column">
        <input type="text" name="name" class="form-control">
      </div>
    </div>
    <div class="form-row">
      <div class="column">
        <input type="text" name="name" class="form-control">
      </div>
    </div>
    <div class="form-row">
      <div class="column">
        <input type="text" name="name" class="form-control">
      </div>
    </div>
  </div>
  <div class="half-size">
    <div class="form-row">
      <div class="column">
        <textarea class="form-control" cols="40" rows="10"></textarea>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="column">
      <input type="submit" name="name" class="button">
    </div>
  </div>
</div>
</div>

这就是我想要的，在左栏上有提交按钮

Answer 1

您需要将您的容器设置为 display:inline-block，因为默认情况下它们是 block 级元素并且不允许其他元素位于它们旁边。

我使用 45% 是因为 50% + 50% 在使用内联 block 时通常不是 100% 因为空格问题，有 some ways around it , 我会让你自己决定使用哪个 hack...

#responsive-form {
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.form-row {
  width: 100%;
}

.form-row input {
  margin: 10px 0;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.button {
  float: left;
  background: #CA0002;
  color: #fff;
  text-transform: uppercase;
  border: none;
  padding: 8px 20px;
  cursor: pointer;
}

input[type="text"],
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box
}

.half-size {
  width: 45%;
  display:inline-block;
}

<div id="responsive-form" class="clearfix">
  <div class="half-size">
    <div class="form-row">
      <div class="column">
        <input type="text" name="name" class="form-control">
      </div>
    </div>
    <div class="form-row">
      <div class="column">
        <input type="text" name="name" class="form-control">
      </div>
    </div>
    <div class="form-row">
      <div class="column">
        <input type="text" name="name" class="form-control">
      </div>
    </div>
    <div class="form-row">
      <div class="column">
        <input type="text" name="name" class="form-control">
      </div>
    </div>
  </div>
  <div class="half-size">
    <div class="form-row">
      <div class="column">
        <textarea class="form-control" cols="40" rows="10"></textarea>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="column">
      <input type="submit" name="name" class="button">
    </div>
  </div>
</div>
</div>