對齊按鈕到底部（浮動）

我想將下圖中的按鈕對齊到底部，我嘗試了很多技巧，但沒有任何東西似乎沒有打破它的工作。該按鈕將佔用一個固定的空間，而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

對齊按鈕到底部（浮動）

回答

相關問題