如何設置DIV寬動態基於高度

-1

<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寬度當右側div的高度爲100px時，爲50％，，並且當它的高度高於100px時，我想給出相同的左側div寬度100％。

有什麼建議嗎？在此先感謝。

來源

2015-01-21 Srikanth

您可以通過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');

這樣，您就可以做到這一點。

來源

2015-01-21 07:49:02

從我的理解，這可能幫助

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

.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; 
 
}

<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>

來源

2015-01-21 08:38:56 Prachit

如何設置DIV寬動態基於高度

回答

相關問題