Question

我的HTML代码

<div class="persoonal">
    <div class="left"></div>
    <div class="rigth"></div>
</div>

我的CSS代码

.profile {
width: 100%;}

.left {
width: 50%;
float: left;
height: auto;
display: inline-block;}

.rigth {
float: right;
width: 48%;
height: 100px;
display: inline-block;}

我是HTML新手，

当右div的高度为100px时，我想给左div宽度50％，当它的高度超过100px时，我想给同样的左div宽度100％。

有什么建议吗？提前谢谢。

Answer 1

你可以通过jquery，

来做到这一点

    var div_width = $( ".left" ).width();
var r_div_height = $( ".right" ).height();
if(r_div_height == '100')
    $( ".left" ).width('50');
if(div_width == '100')
    $( ".left" ).width('100');

这样你就可以做到。

Answer 2

据我所知，这可能会有所帮助

＆＃13;

if ($('.rigth').height() > 100) {
  $('.left').css("width", "100%");
}

＆＃13;

.profile {
  width: 100%;
}
.left {
  width: 50%;
  background: red;
  float: left;
  height: auto;
  display: inline-block;
}
.rigth {
  float: right;
  background: blue;
  width: 48%;
  height: auto;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="persoonal">
  <div class="left">Test</div>
  <div class="rigth">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

＆＃13;

如何根据高度动态设置div宽度

2 个答案: