html - 将按钮对齐到底部( float )

Question

我正在尝试将下图中的按钮对齐到底部，我尝试了很多技巧，但如果不破坏它，似乎什么都行不通。按钮要占用固定的空间，而文本区域要填充剩余的空间。添加了 codepen 示例!

想要一个非 flexbox 的答案(ie9+)!如果不是 Vanilla css，也只有 LESS 作为预处理器。

html:

<div class="wrapper">
  <div class="text">

    <div class="right">
      <button>submit</button>
    </div>

    <div class="left">
      <textarea></textarea>
    </div>

  </div>
</div>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>

CSS:

body, html {
  margin: 0;
}

.wrapper {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: green;
}

.text {
  width: 800px;
  margin: 0 auto;
  background: red;
}

.right {
  float: right;
  padding-left: 10px;
  height: 100%;
  background: gray;
}

textarea {
  width: 100%;
  height: 200px;
  box-sizing: border-box;
}

.left {
  overflow: auto;
  padding: 10px;
}

js:

tinymce.init({
  selector: 'textarea',
  theme: 'modern',
  width: '100%',
  height: 50,
  autoresize_min_height: 50,
  menubar: false, // removes top menubar,
  statusbar: false, // removes bottom statusbar
  toolbar: 'undo redo | bold italic | link image',
  plugins: ['image autoresize'],
  automatic_uploads: false,
});

http://codepen.io/basickarl/pen/Megjyb

Answer 1

Flexbox 是你的 friend : http://codepen.io/mwvanmeurs/pen/XKrRKx

使 .text 成为一个 flex 容器，并告诉所有内容都对齐到它的末尾。

看看那里的 CSS，如果您有任何问题，请 lmk。突出差异:

.text {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
}

.left {
  flex: 1;
}