Question

每列有两个div，第一个div有图像，第二个div有内容。我想要什么，如果正确的div内容增加，那么左div图像应该增加。

<div class="container">
<div class="row">
<div class="col-xs-4">
<a> <img src="image name" /></a>
</div>

<div class="col-xs-8">
<span>content </span>
<span>content</span>
</div>
enter code here
</div>
</div>

See image snapshot:

Answer 1

如果您不喜欢这样，那么您可以使用html表。在表格中设置图像会很容易，所以当内容增加时，图像就会有效。

代码

td {
  width: 50%;
}
#image {
  height: 100%;
  background-image: url('1.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

<html>

<head>

  <body>
    <table border="1px solid" width="500px" cellpadding=10px cellspacing=0>
      <tr>
        <td id="image"></td>
        <td>There is some text in this field.
          <br/>There is some text in this field.
          <br/>There is some text in this field.
          <br/>There is some text in this field.
          <br/>There is some text in this field.
          <br/>There is some text in this field.
          <br/>There is some text in this field.
          <br/>There is some text in this field.
          <br/>There is some text in this field.
          <br/>There is some text in this field.
          <br/>There is some text in this field.
          <br/>There is some text in this field.
          <br/>There is some text in this field.
          <br/>


        </td>
      </tr>
    </table>
    </div>
  </body>

我已经测试了这段代码并且运行正常。使用您自己的图片网址更改背景图片网址

祝你好运

Answer 2

如果您想在文档准备就绪时设置图像高度，请使用以下代码

$(function(){
var getdivheight = $('.content').height();
$('.flexdiv img').height(getdivheight);
});

.contnr{background: lightgray;padding:15px !important;}
.flexdiv{
    background: #ffffff;
}
.row{margin: 0px !important;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<div class="contnr container">
<div class="row">
<div class="flexdiv flexdivimg col-xs-6">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQclrVST8RfqvxSo5ggL8Ubn2_heNqVgJAxQYRDyigKqP0xnjRLS81yMFc" height="100%" width="100%" alt="" />
</div>
<div class="flexdiv content col-xs-6" contenteditable="">The quick brownfox jumps over the lazy dog. The quick brownfox jumps over the lazy dog. The quick brownfox jumps over the lazy dog. The quick brownfox jumps over the lazy dog. The quick brownfox jumps over the lazy dog. The quick brownfox jumps over the lazy dog. The quick brownfox jumps over the lazy dog. The quick brownfox jumps over the lazy dog. The quick brownfox jumps over the lazy dog. The quick brownfox jumps over the lazy dog. The quick brownfox jumps over the lazy dog. The quick brownfox jumps over the lazy dog. The quick brownfox jumps over the lazy dog. The quick brownfox jumps over the lazy dog.The quick brownfox jumps over the lazy dog. </div>
</div>
</div>
</div>

如果您使用此代码进行认证，请投票一次以增加我的声誉，这是必要的。

如何创建动态左div图像高度等于右div高度？

2 个答案: