[英]How to bottom-align these divs?
HTML HTML
<div id="page"><div id="results"><div class="result">1+2</div>
<div class="result">3*4</div><div class="result">5/9</div>
<div class="result">y=mx+b</div></div><input id="eq" type="text" autofocus=""></div>
CSS CSS
@import url(http://fonts.googleapis.com/css?family=Rokkitt);
body {
background-color: #444047;
margin: 0;
padding: 0;
}
#page {
width: 40%;
background-color: #ececec;
position: fixed;
top: 0;
bottom: 0;
left: 50%;
margin-left: -20%;
}
#results {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 75px;
}
#eq {
width: 96%;
margin-left: -48%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
border-width: 2px;
border-color: #9A9A9A #EEEEEE #EEEEEE #9A9A9A;
border-style: solid;
font-family: 'Rokkitt', serif;
letter-spacing: 1px;
font-size: 24pt;
padding: 5px 10px;
position: absolute;
bottom: 10px;
left: 50%;
}
#eq:focus {
border-color: #4E9FF2 #84B2E0 #84B2E0 #4E9FF2;
-webkit-box-shadow: 0 0 10px #007eff;
-moz-box-shadow: 0 0 10px #007eff;
-ms-box-shadow: 0 0 10px #007eff;
-o-box-shadow: 0 0 10px #007eff;
box-shadow: 0 0 10px #007eff;
outline: none;
}
#results {
font-family: 'Rokkitt', serif;
font-size: 16pt;
vertical-align: bottom;
text-align: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 5px;
display: table-cell;
overflow: auto;
}
.result {
padding: 2px;
}
.result + .result {
border-top: 1px dotted gray;
}
How can I align the .result
divs to the bottom of the #result
container? 我该如何调整的
.result
的div的底部#result
容器?
Edit: The #results
div needs to gain a scrollbar if there are too many .result
s to fit. 编辑:如果有太多
.result
不能容纳,则#results
div需要获得一个滚动条。 overflow:auto
seems to be incompatible with some of the solutions below. overflow:auto
似乎与下面的一些解决方案不兼容。
Lets clean up your mess, wrap the inner container which is position: absolute;
让我们清理混乱,包裹内部容器,
position: absolute;
in a position: relative;
position: relative;
container, I've made this from scratch, you can have a look 容器,我是从头开始制作的,您可以看一下
<div class="wrap">
<div class="inner_wrap">
<span>1+2</span>
<span>3*4</span>
<span>5/9</span>
<span>y=mx+b</span>
<span><input id="eq" type="text" autofocus="" /></span>
</div>
</div>
CSS (Excluding input
element style, but I've included that in the demo fiddle) CSS(不包括
input
元素样式,但我已在演示小提琴中将其包括在内)
html, body {
background-color: #444047;
height: 100%;
}
.wrap {
width: 230px;
background: #ECECEC;
height: 100%;
margin: auto;
position: relative;
}
.wrap span {
display: block;
border-bottom: 1px dotted #515151;
padding: 5px;
font-size: 18px;
font-family: Arial;
}
div span:last-child {
border-bottom: 0;
}
.inner_wrap {
position: absolute;
bottom: 0;
}
Here's a version which doesn't break your overflow: auto
. 这是一个不会破坏您的
overflow: auto
的版本overflow: auto
。
Here's a jsFiddle . 这是一个jsFiddle 。
Basically what I'm doing is wrapping your markup in enough div
's so that I can make the wrapper div
's behave like a table, with the display: table;
基本上,我正在做的是将您的标记包装在足够的
div
,这样我就可以通过display: table;
使包装器div
表现得像一个display: table;
, display: table-row;
,
display: table-row;
and display: table-cell;
并
display: table-cell;
CSS properties. CSS属性。
Now that the wrapping markup behaves like a table, I can absolutely position a div
inside the "cell" in the top "row" and set it to stick to the bottom with a max-height
of 100%
and its overflow
set to auto
. 现在,包装标记的行为类似于表格,我可以将
div
绝对定位在顶部“行”的“单元格”内,并将其设置为max-height
为100%
并固定在底部,并且其overflow
设置为auto
。 This is the exact same technique I used in the original answer I posted here. 这与我在此处发布的原始答案中使用的技术完全相同。 But now the
max-height
of 100%
will stay inside the top row of the table
, eliminating the issues which you pointed out with the solutions I posted earlier. 但是现在
max-height
100%
将保留在table
的第一行内,从而消除了您在我之前发布的解决方案中指出的问题。
Here are the relevant CSS classes: 以下是相关的CSS类:
#page {
width: 40%;
background-color: #ececec;
position: fixed;
bottom: 0;
left: 50%;
margin-left: -20%;
display: table;
height: 100%;
}
#results, #input {
display: table-row;
}
#results > div {
display: table-cell;
height: 100%;
position:relative;
}
#results > div > div {
overflow: auto;
max-height: 100%;
width: 100%;
position: absolute;
bottom: 0px;
}
#input {
height: 75px;
}
#results {
font-family:'Rokkitt', serif;
font-size: 16pt;
vertical-align: bottom;
text-align: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
overflow: auto;
height: 100%;
}
And here's the edited HTML: 这是经过编辑的HTML:
<div id="page">
<div id="results">
<div>
<div>
<div class="result">1+2</div>
<div class="result">3*4</div>
<div class="result">5/9</div>
<div class="result">y=mx+b</div>
<div class="result">y=mx+b</div>
<div class="result">y=mx+b</div>
<div class="result">y=mx+b</div>
<div class="result">y=mx+b</div>
<div class="result">y=mx+b</div>
<div class="result">y=mx+b</div>
<div class="result">y=mx+b</div>
<div class="result">1+2</div>
</div>
</div>
</div>
<div id="input">
<input id="eq" type="text" autofocus="" />
</div>
</div>
DEMO: http://jsfiddle.net/H2qBH/1/ do you want like this..... 演示: http : //jsfiddle.net/H2qBH/1/您想要这样吗.....
#results {
position: absolute;
top: 275px;
right: 0;
left: 0;
bottom:0px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.