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

希望对你有帮助 ...

10-05 20:40
查看更多