3盒内联，内容对齐

Question

我有3个包含动态内容的方框，每个方框中都有一个带提交按钮的表单，以及其他一些内容。如何从图片中获得效果。

每个方框的高度最大。在底部的一行中提交按钮。

＆＃13;

＆＃13;

body {
  width: 720px;
}
form input {
  display: block;
  margin-bottom: 15px;
  width: 100%;
}
form label {
  text-align: left;
  width: 100%;
  display: block;
}
.box-container {
  display: flex;
}
.box {
  border: 1px solid #000;
  flex: 1 1 auto;
  max-width: calc(33% - 2px);
  text-align: center;
  box-sizing: border-box;
  padding: 10px;
}
.box p {
  text-align: justify;
}

＆＃13;

<div class="box-container">
  <div class="box">
    <h1>bla bla bla</h1>
    <p> some information dasd asd asd asdasdasfs dsgd dfg sdfg fsdg sdfg s</p>
    <form>
      <label>value 1</label>
      <input type="text"/>
      <label>value 2</label>
      <input type="text"/>
      <input type="submit" value="submit"/>
    </form>
  </div>
  <div class="box">
    <h1>bla bla bladada das dasd asd</h1>
    <p>Longer information<br> some information dasd asd asd asd an</p>
    <form>
      <label>value 1</label>
      <input type="text"/>
      <label>value 2</label>
      <input type="text"/>
      <label>value 3</label>
      <input type="text"/>
      <input type="submit" value="submit"/>
    </form>
  </div>
  <div class="box">
    <h1>bla bla b</h1>
    <p>Longer information</p>
    <form>
      <label>value 1</label>
      <input type="text"/>
      <input type="submit" value="submit"/>
    </form>
  </div>
<div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我从头开始写了一些东西供你用作基础。

<强> HTML

<div class="wrapper">
    <div>
        <input type="submit"/>
    </div>
    <div>
        <input type="submit"/>
    </div>
    <div>
        <input type="submit"/>
    </div>
</div>

<div class="clearfix"></div>

<强> CSS

.wrapper > div {
    border: 1px solid #000;
    float: left;
    width: 250px;
    height: 300px;
    margin: 0 10px;
    position: relative;
}

.wrapper {
    margin: 0 auto;
    width: 830px;
}

.wrapper > div > input[type="submit"] {
    position: absolute;
    bottom: 20px;
    left: 25px;
    display: block;
    width: 200px;
}

.clearfix:before, .clearfix:after {
    content: "";
    clear: both;
    display: block;
}

最后，它看起来像这样。我添加了.clearfix，以防您在其后添加更多内容。

使用它here。希望这可以帮助你。

另外，如果你不喜欢使用绝对位置的想法。我这样做只是为了演示它的样子，没有按钮上方的虚拟内容。

另一种方法是为每个矩形节点创建一个包装器。在包装器内部，声明两个彼此重叠的div。底部div应包含提交按钮。

Answer 2

我希望这就是你所需要的。我已经在表单中添加了flex属性以占用所有可用空间

＆＃13;

＆＃13;

body {
  width: 720px;
}

form {
  flex: 1 0 auto;
  position: relative;
  padding-bottom: 30px;
}

form input {
  display: block;
  margin-bottom: 15px;
  width: 100%;
}

form label {
  text-align: left;
  width: 100%;
  display: block;
}

form button {
  display: block;
  width: 100%;
  position: absolute;
  bottom: 10px;
}

.box-container {
  display: flex;
}

.box {
  border: 1px solid #000;
  flex: 1 1 auto;
  max-width: calc(33% - 2px);
  text-align: center;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.box p {
  text-align: justify;
}

＆＃13;

<div class="box-container">
  <div class="box">
    <div>
      <h1>bla bla bla</h1>
      <p> some information dasd asd asd asdasdasfs dsgd dfg sdfg fsdg sdfg s</p>
    </div>
    <form>
      <label>value 1</label>
      <input type="text" />
      <label>value 2</label>
      <input type="text" />
      <button type="submit">Submit</button>
    </form>
  </div>
  <div class="box">
    <h1>bla bla bladada das dasd asd</h1>
    <p>Longer information<br> some information dasd asd asd asd an</p>
    <form>
      <label>value 1</label>
      <input type="text" />
      <label>value 2</label>
      <input type="text" />
      <label>value 3</label>
      <input type="text" />
      <button type="submit">Submit</button>
    </form>
  </div>
  <div class="box">
    <h1>bla bla b</h1>
    <p>Longer information</p>
    <form>
      <label>value 1</label>
      <input type="text" />
      <button type="submit">Submit</button>
    </form>
  </div>
  <div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将flex-direction: column;添加到标题，内容和表单中，然后将justify-content: flex-end添加到表单中，它将解决问题

.box h1,
.box p,
.box form {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.box form {
    justify-content: flex-end;
}

form input {
    display: block;
    margin-bottom: 15px;
    width: 100%;
}

form label {
    text-align: left;
    width: 100%;
    display: block;
}

.box-container {
    display: flex;
}

.box {
    border: 1px solid #000;
    flex: 1 1 auto;
    max-width: calc(33% - 2px);
    text-align: center;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
}

.box p {
    text-align: justify;
}

.box h1,
.box p,
.box form {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.box form {
    justify-content: flex-end;
}

<div class="box-container">
  <div class="box">
    <h1>bla bla bla</h1>
    <p> some information dasd asd asd asdasdasfs dsgd dfg sdfg fsdg sdfg s</p>
    <form>
      <label>value 1</label>
      <input type="text" />
      <label>value 2</label>
      <input type="text" />
      <input type="submit" value="submit" />
    </form>
  </div>
  <div class="box">
    <h1>bla bla bladada das dasd asd</h1>
    <p>Longer information
      <br> some information dasd asd asd asd an</p>
    <form>
      <label>value 1</label>
      <input type="text" />
      <label>value 2</label>
      <input type="text" />
      <label>value 3</label>
      <input type="text" />
      <input type="submit" value="submit" />
    </form>
  </div>
  <div class="box">
    <h1>bla bla b</h1>
    <p>Longer information</p>
    <form>
      <label>value 1</label>
      <input type="text" />
      <input type="submit" value="submit" />
    </form>
  </div>
  <div>

Answer 4

我在第2列和第3列添加了一些左边距。我有一个绝对的底部定位一个新的按钮包装与填充，以集中定位它。我在盒子上添加了一些填充底部，以帮助防止按钮与内容重叠。如果按钮变大或按钮文本换行到另一行，这将会发出，但这是我能想到的最佳解决方案。

＆＃13;

＆＃13;

form input {
  display: block;
  margin-bottom: 15px;
  width: 100%;
}
form label {
  text-align: left;
  width: 100%;
  display: block;
}
.box-container {
  display: flex;
  padding: 5px;
}
.box {
  flex: 1 1 auto;
  border: 1px solid #000;
  width: 33.333%;
  text-align: center;
  box-sizing: border-box;
  padding: 10px 10px 40px;
  margin-left: 10px;
  position: relative;
}
.box:first-child {
  margin-left: 0;
}
.box p {
  text-align: justify;
}
.button-wrap  {
  position: absolute;
  bottom:0;
  left: 0;
  right:0;
  padding:10px;
}
.button-wrap input {
  margin:0;
}

＆＃13;

<div class="box-container">
  <div class="box">
    <h1>bla bla bla</h1>
    <p> some information dasd asd asd asdasdasfs dsgd dfg sdfg fsdg sdfg s</p>
    <form>
      <label>value 1</label>
      <input type="text"/>
      <label>value 2</label>
      <input type="text"/>
			<div class="button-wrap">
				<input type="submit" value="submit"/>
			</div>
    </form>
  </div>
  <div class="box">
    <h1>bla bla bladada das dasd asd</h1>
    <p>Longer information<br> some information dasd asd asd asd an</p>
    <form>
      <label>value 1</label>
      <input type="text"/>
      <label>value 2</label>
      <input type="text"/>
      <label>value 3</label>
      <input type="text"/>
			<div class="button-wrap">
				<input type="submit" value="submit"/>
			</div>
    </form>
  </div>
  <div class="box">
    <h1>bla bla b</h1>
    <p>Longer information</p>
    <form>
      <label>value 1</label>
      <input type="text"/>
			<div class="button-wrap">
				<input type="submit" value="submit"/>
			</div>
    </form>
  </div>
<div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

确定。感谢大家的回答。我解决了我的问题。

＆＃13;

＆＃13;

form input {
  display: block;
  margin-bottom: 15px;
  width: 100%;
}

form label {
  text-align: left;
  width: 100%;
  display: block;
}

.box-container {
  display: flex;
}

.box {
  border: 1px solid #000;
  flex: 1;
  text-align: center;
  box-sizing: border-box;
  padding: 10px;
}
.box form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.box p {
  text-align: justify;
}

＆＃13;

<div class="box-container">
  <div class="box">
    <form>
      <div class="top">
      <h1>bla bla bla</h1>
      <p> some information dasd asd asd asdasdasfs dsgd dfg sdfg fsdg sdfg s</p>
      <label>value 1</label>
      <input type="text" />
      <label>value 2</label>
      <input type="text" />
      </div>
      <div class="bottom">
      <input type="submit" value="submit" />
      </div>
    </form>
  </div>
  <div class="box">
    <form>
      <div class="top">
        <h1>bla bla bladada das dasd asd</h1>
        <p>Longer information<br> some information dasd asd asd asd an</p>
        <label>value 1</label>
        <input type="text" />
        <label>value 2</label>
        <input type="text" />
        <label>value 3</label>
        <input type="text" />
      </div>
     <div class="bottom">
      <input type="submit" value="submit" />
     </div>
     </form>
  </div>
  <div class="box">
    <form>
      <div class="top">
        <h1>bla bla b</h1>
        <p>Longer information</p>
        <label>value 1</label>
        <input type="text" />
      </div>
      <div class="bottom">
        <input type="submit" value="submit" />
      </div>
    </form>
  </div>
  <div>

＆＃13;

＆＃13;

＆＃13;