Question

我有一个小问题，我希望内部div在其外部div的中心开启，如果添加更多文本而不是向下显示，还会在顶部和底部扩展。我已经突出显示了我希望div在红色图像上的位置以及我希望它如何扩展。

提前致谢！

HTML

<div class="postlefttoright"><!--start of post-->

        <div class="featuredimageblog"><img src="http://www.lorempixel.com/534/371" /></div>

        <div class="featuredexcon">

            <div class="featuredexconinner">

                <div class="featuredexcontent">

                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

                </div>

            </div>

        </div>

    </div><!--end of post-->

CSS

.postlefttoright {
    position: relative;
    float:left;
    width: 1067px;
    height:371px;
    margin-bottom:53px;
}

.featuredimageblog {
    position: relative;
    float:left;
    width: 534px;
    height:371px;}

.featuredexcon {
    position: relative;
    float:left;
    width: 533px;
    height:371px;}  

.featuredexconinner {
    position: relative;
    margin:0 auto;
    width: 407px;
    height:371px;}      

.featuredexcontent {
    position: absolute;
    top:50%;
    width: 407px;
    height:171px;}

Answer 1

对此的快速解决方法是添加display: table及其通讯员display:table-cell，最终将与vertical-align:middle一起使用。为此，您需要取出以下代码：

.featuredexconinner {
position: relative;
margin:0 auto;
background:gray;
width: 407px;
height:auto;
}

只是因为你不需要div中的div内的div（div-ception）。相反，您只需要以下代码：

.featuredexcon {
    display:table;
    position: relative;
    float:left;
    width: 533px;
    height:371px;
}
.featuredexcontent {
    display:table-cell;
    vertical-align:middle;    
    width: 407px;
    height:auto;
}

这应该修复你的代码，假设你从我说要拿出的部分中取出了相应的HTML。同时快速注释，position:absolute与top:50%混合会移动你的div，并且会因为绝对定位而阻止你垂直对齐div。

DEMO

将div和自动扩展集中在顶部和底部的问题

1 个答案: