http://jsfiddle.net/fretwiz/LuShM/
我彼此之间有一个div堆栈,在这些div内有两个内联块div。一个div的宽度i为80%,我向左浮动,另一个div的宽度为20%i就在右侧。
我想使正确的div垂直居中,父行div可以根据浮动div的内容动态调整大小。
除了使用表格,还有其他解决方案吗?
<div id="container">
<div id="content-wrapper">
<div id="publication_date">21 October 2014</div>
<div id="title">Curie-Cancer and DNA Therapeutics partner in the fight against cancers that resist conventional therapies</div>
</div>
<div id="bookmark">
<img src="http://lorempixel.com/output/abstract-q-g-30-30-4.jpg" />
</div>
</div>
<div id="container">
<div id="content-wrapper">
<div id="publication_date">21 October 2014</div>
<div id="title">Curie-Cancer and DNA Therapeutics partner in the fight against cancers that resist conventional therapies</div>
</div>
<div id="bookmark">
<img src="http://lorempixel.com/output/abstract-q-g-30-30-4.jpg" />
</div>
</div>
最佳答案
您可以在不使用表的情况下进行操作,请通过CSS进行尝试:
#container {
border-bottom: 1px solid #ebebeb;
padding-bottom: 30px;
overflow: hidden;
height: 100%;
position: relative;
}
#content-wrapper {
width: 80%;
float: left;
}
#bookmark {
position: absolute;
width: 20%;
text-align: center;
right: 0;
top: 50%;
-ms-transform:translateY(-50%); /* IE 9 */
-webkit-transform:translateY(-50%); /* Chrome, Safari, Opera */
transform:translateY(-50%); /* Standard syntax */
}
Demo
希望对你有帮助 ...