对齐按钮到底部（浮动）

我想将下图中的按钮对齐到底部，我尝试了很多技巧，但没有任何东西似乎没有打破它的工作。该按钮将占用一个固定的空间，而textarea将填充剩余的空间。增加了codepen示例！对齐按钮到底部（浮动）

想非flexbox答案（ie9 +）！如果不是香草css，也只能作为预处理器使用。

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

来源

2016-05-25 Karl Morrison

Flexbox的是你的朋友： http://codepen.io/mwvanmeurs/pen/XKrRKx

制造.text Flex容器和一切都告诉他对齐到它的结束。

如果您有任何问题，请查看CSS和lmk。为了突出差异：

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

.left { 
    flex: 1; 
}

来源

2016-05-25 17:36:57 Pytth

Doh！忘了提及没有Flexbox（ie9 +，该死的我一直忘记提及这一点）正在使用，我会1+你的努力，它可能会帮助一些其他可怜的灵魂:) –

这可能是使用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%; 
}

更新Codepen固定宽度为.text（800px）。
更新Codepen与.text（80%）的百分比宽度。

来源

2016-05-25 17:41:41 hungerstar

会工作，但按钮的大小将因为“提交”会随着语言的不同而变化，一种语言可能会有相当于10个字母的单词，所以88％不会工作:(因此我放在它上面的重量不会破坏 –

@KarlMorrison我有一种感觉，你可以调整每种语言的宽度，这显然是更多的工作，但你可以添加一个语言类到'.wrapper'或'.text'。像'.wrapper.en {width：88％;} '，'.wrapper.es {width：85％;}'和'.wrapper.fr {width：90％;}';不是很漂亮，而是一个选项 – hungerstar

我不认为它能覆盖所有的屏幕和所有的屏幕dpi等等。:( –

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

来源

2016-05-25 17:52:14 Gautham

而不是使用高度：.right类中的100％..use margin-top：20％; – Gautham

你有两个选择。

选项1

给该按钮的ID，例如：

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

和添加两个简单样式

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

选项2

的其他选项是您将文本div设置为具有适合文本区域大小的固定高度。您已使用高度：200px为您的＃文字 div。所以，你可能要打击这样的... ...

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


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

什么，将要做的就是按下按钮，而不给它一个ID。只要您不想在文本字段右侧的提交按钮上方显示其他任何内容，就会生效。

来源

2016-05-25 17:52:32

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

这应该为你工作。

来源

2016-05-25 18:06:07 Pushpendra

对齐按钮到底部（浮动）

回答

相关问题