Question

我有这个演示：https://jsfiddle.net/DTcHh/18752/我希望图像高度基于右侧，以便图像始终到达div的末尾。有什么建议吗？

<div class="blog_list">
    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="blog_image">
                <img src="img/property_img.png" />
            </div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="blog_details">
                <div class="blog_title">This comfortable apartment is located in the heart of Zurich</div>
                <div class="blog_posted">POSTED ON: <span>JANUARY 24 2016 14:35h </span>IN <span>KREIS 1</span></div>
                    <p class="blog_more-details">
                    Wheather a single room studio or multi-room apartment, each has at least one own bathroom and a fully quipped kitches.
                    </p>
                <div class="sold_by">
                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <div class="row">
                                <div class="col-md-2 col-sm-2 col-xs-12 ">
                                    <div class="profile-image"><img src="img/profile.png" /></div>
                        </div>
                    <div class="col-md-10 col-sm-10 col-xs-12 no-padding-left">
                    <span class="property">ARTICLE WRITEN BY</span>
                    <span class="property_name">Janine Lindenmuller</span>
                    <div class="blog_read_more">
                    <a href="#">READ MORE</a>
                    </div>
                </div>
            </div>
        </div>
    </div></div></div></div></div></div>

Answer 1

我认为你需要删除bootstrap网格类，并且必须用display:table-cell编写一些自定义css

例如

.img,.text {
  display: table-cell;
  vertical-align: top;
}
.img {
  width:60%;
}
.text {
  width:40%;
}

也使用低维图像。小提琴here

Answer 2

像这样设置图像行：

<强> JSFiddle

<div class="col-md-12 col-sm-12 col-xs-12">

如何根据右侧拉伸图像？

2 个答案: