Question

我试图将下面图片中的按钮对齐到底部，我尝试了很多技巧，但似乎没有什么可以解决它。该按钮用于占据固定空间，而textarea则用于填充剩余空间。添加了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是你的朋友： http://codepen.io/mwvanmeurs/pen/XKrRKx

使.text成为一个灵活容器，告诉所有内容与其结尾对齐。

如果您有任何疑问，请查看那里的CSS和lmk。突出差异：

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

.left {
  flex: 1;
}

Answer 2

这可能是使用CSS表的情况。

将包装器元素.text设置为display: table;。
将子“列”元素.left和.right设置为display: table-cell;。
将.right设置为vertical-align: bottom;，将内容转移到底部而不是中间或顶部。

不确定您是否需要灰色背景，所以我将其删除了。可能还需要仔细检查一些填充。

.text {
  display: table;
  width: 800px;
  margin: 0 auto;
  background: red;
}
.right,
.left {
  display: table-cell;
  padding: 10px;
}
.right {
  vertical-align: bottom;
}
.left {
  width: 100%;
}

更新了.text 800px .text（80%）的固定宽度。
使用link_to(name = nil, options = nil, html_options = nil, &block)（<%= link_to like_post_path(@post), :method => :put do %>）的百分比宽度更新了Codepen。

Answer 3

.right {
  float: right;
  padding-left: 10px;
  margin-top:20%;
  background: gray;
}

Answer 4

您有两种选择。

选项1

为按钮指定ID，例如：

#button-submit{
    position: absolute;
    vertical-align: bottom;
 }

并添加两个简单的样式

#button-submit{
    position: absolute;
    vertical-align: bottom;
 }

选项2

另一个选项是将文本div设置为具有适合 文本区域 大小的固定高度。您已为 #text div使用 height：200px 。所以你可能想要像这样打击它......

#text{
   width: 800px;
   margin: 0 auto;
   background: red;
   height: 200px;
} 


#right button{
    height: 30px;
    margin: 170px 0px 0px 0px;
}

这样做是按下按钮而不给它一个ID。只要您不希望文本字段右侧的提交按钮上方有任何其他内容，此功能就可以使用。

Answer 5

CodePen

.right {
 position:absolute;
 float: right;
 padding: 10px;
 background: gray;
 height: 20px;
 width: 50px;
 bottom:0px;
 right:0px;
  }



.text {
  position:relative;
  width: 900px;
  margin: 0 auto;
  background: red;
 }

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


.left {
 overflow: auto;
 padding: 10px;
 width:91%;
 }

这应该适合你。

将按钮对齐底部（浮动）

5 个答案: