将自动高度设置为标签

Question

根据上面的div将自动高度设置为标签。我尝试下面的代码请检查小提琴。我将height:auto设置为标签。它不受此标签的支持。我需要将右侧图像等于左侧复选框高度。

jsfiddle.net/malaiii/3vej0tca/

Answer 1

如果要设置列的高度等于其他列的高度，则可以使用小于其他列的列的绝对位置。

HTML like

<div class="wrapper">
    <div class="left">
        <div class="control">
            <input type="checkbox" /> Click me
        </div>
        <div class="control">
            <input type="checkbox" /> Click me
        </div>
        <div class="control">
            <input type="checkbox" /> Click me
        </div>
    </div>
    <div class="right">
        <img src="http://placehold.it/350x150">
    </div>
</div>

和CSS

.wrapper {
    position: relative;
    width: 404px;
    overflow: hidden;

    border: 1px solid #f00;
}
    .wrapper .left {
        width: 200px;
        float: left;

        border: 1px dotted #00f;
    }
    .wrapper .right {
        position: absolute;
        left: 200px;
        top: 0;
        bottom: 0;
        width: 200px;
        float: left;

        background: #efefef;
    }
    .wrapper .right img {
        height: 100%;
    }
.control {
    padding: 10px;
}

请参阅示例http://jsfiddle.net/588efqtf/2/

希望它会帮助你。