为什么我不能将div高度保持为正确的div

时间:2015-11-05 11:34:10

标签: html css

  

在bootstrap中,我创建了两个内联div。

     

在右边div我有图片属性宽度:100%,现在我的问题是   离开div,我想设置他的高度相同的div col-sm-9,怎么办   这一点。

     

是简单的方法是为col-sm-3和col-sm-9设置相同的高度,但它是   图像不是语义。是否可以计算col-sm-9的高度   并将该值设置为col-sm-3?

http://jsfiddle.net/gdxvy575/

HTML

 <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <h2>This is title</h2>
                <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci </p>

            </div>
            <div class="col-sm-9">
                <img src="http://eibach.com/sites/eibach.com.m-global/files/pictures/project_cars/eibach_projektfahrzeug_vw_scirocco_1024x768_1.jpg" alt=""/>
            </div>
        </div>
    </div>

CSS

 .col-sm-3{
        height:100%;
        background-color:blue;
        color:white;
        font-weight:300;
    }
    .col-sm-9 img{
        width:100%;
    }

2 个答案:

答案 0 :(得分:1)

HI现在用于显示 属性 tabel-cell,就像这样

.col-sm-9, .col-sm-3{display:table-cell;vertical-align:top;float:none;}

<强> Demo Link

答案 1 :(得分:0)

我在这里更新了小提琴

Fiddle

&#13;
&#13;
SELECT isPublic FROM folder WHERE folderName = "Child Folder 2";
&#13;
var imgHeight = $('.col-sm-9 img').height();
$('.col-sm-3').css("height", imgHeight);
&#13;
.col-sm-3{
    height:100%;
    background-color:blue;
    color:white;
    font-weight:300;
}
.col-sm-9 img{
    width:100%;
}
&#13;
&#13;
&#13;

试试这个