Question

首先，我知道将css放在外部文件中会更好，但这仅用于测试。我创建了一个横幅，其中包含几个带图像的列。为了使这个响应我试图使用百分比。但是，当应用自动高度时，我遇到了有关包装div的问题。它似乎只是100％而不是与实际内容相同的高度？如何使包装div与内容（图像）的高度相同？

JSFiddle链接：http://jsfiddle.net/z41nknL3/

<head>

    <style>
    .wrapper {
        width: 100%;
        height: auto;


    }

    .item {
        float: left;

    }

    .double-size {
        width: 66.6666%;
        height: auto;




    }

    .normal-size {
        float: left;
        width: 33.3333%;
        height: auto;
        display: inline-block;



    }

    .double-size .column-big {
        box-sizing:border-box; 
       width: 100%;
        height: auto;
        padding: 0px 2px 0px 0px;





    }

    .normal-size .column-small-1 {
        box-sizing:border-box;
        width: 100%;
        height: 50%;  
        padding: 0px 0px 2px 2px;





    }

    .normal-size .column-small-2 {
        box-sizing:border-box;
        width: 100%;
        height: 50%;

        padding: 2px 0px 0px 2px;

    }

    .column-content {

        height: 100%;
       position: relative;
       overflow: hidden;


    }



    .column-content .meta-info-doub {
    box-sizing:border-box;
    position: absolute;
    height: auto;
    width: 100%;
    bottom:0;
    right: 0;
    padding: 40px;
    }

    .column-content .meta-info-norm {
    box-sizing:border-box;
    position: absolute;
    height: auto;
    width: 100%;
    bottom:0;
    right: 0;
    padding: 20px;
    }



     .title-double {

        font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    line-height: 1.65;
    background: #161616;
    background: rgba(22, 22, 22, 0.5);
    color: #fff;
    display: inline;
    padding: 4px 0;
    margin: 0;
    -webkit-box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
    box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
    text-transform: uppercase;


    }

     .title-normal {
        font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    line-height: 1.65;
    background: #161616;
    background: rgba(22, 22, 22, 0.5);
    color: #fff;
    display: inline;
    padding: 4px 0;
    margin: 0;
    -webkit-box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
    box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
    text-transform: uppercase;


    }

     .date-double {
        font-family: 'Open Sans', sans-serif;
        display: inline;
        color: #fff;
        font-size: 11px;
        text-shadow: 0 1px 0 #222;
        text-transform: uppercase;
        margin-bottom: 11px;
        display: block;
    }


     .date-normal {
        font-family: 'Open Sans', sans-serif;
        display: inline;
        color: #fff;
        font-size: 11px;
        text-shadow: 0 1px 0 #222;
        text-transform: uppercase;
        margin-bottom: 11px;
        display: block;
    }



    .column-content .content-image{

        height: auto; 
        width: 100%; 
        background-size: 100%; 
        display:block; 
         -moz-transition: all .5s;
        -webkit-transition: all .5s;
        transition: all .5s;

    }

    .column-content .content-image:hover {
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        transform: scale(1.2);  

    }

    @media all and (max-width: 768px) {
        .normal-size {
        float: none;
        width: 100%;
        margin-top: 3px;

        }
        .double-size {
        float: none;
        width: 100%;

        }
    }

    </style>
    </head>


    <body>
    <div class="wrapper">
        <div class="item double-size">
            <div class="column-big">
                <div class="column-content">
 <img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">
                        <div class="meta-info-doub">
                            <h3 class="date-double">23. Oktober 2015</h3>
                            <h3 class="title-double">Post 1</h3>



                        </div>


                </div>
            </div>
        </div>
        <div class="item normal-size">
            <div class="column-small-1">
                <div class="column-content">
                     <img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">

                        <div class="meta-info-norm">
                            <h3 class="date-double">23. Oktober 2015</h3>
                            <div class="info-title"><h3 class="title-normal">Post 2</h3></div>



                        </div>




                </div>
            </div>
            <div class="column-small-2">
                <div class="column-content">
                     <img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">

                        <div class="meta-info-norm">
                            <h3 class="date-double">23. Oktober 2015</h3>
                            <div class="info-title"><h3 class="title-normal">Post 3</h3></div>



                        </div>


                </div>
            </div>
        </div>




    </div>




    </body>

enter image description here

Answer 1

尝试从.column-content

中删除高度：100％

Answer 2

尝试：

.wrapper {
    position:absolute;
}

我已经更新了JSFiddle以删除一些不必要的div：

http://jsfiddle.net/z41nknL3/1/

P.S。：background: red; .wrapper是为了显示它的高度。

使外包装div高度等于内容

2 个答案: