console
$('input[type=radio]').on('click', function(){
let div = $('.'+$(this).prop('name'));
let val = $(this).val()/1;
div.attr('style', '');
switch(val) {
case 1:
div.css('float', 'left');
break;
case 2:
div.css('display', 'inline-block');
break;
case 3:
div.css('position', 'absolute');
break;
case 4:
div.css('overflow', 'hidden');
break;
default:
div.attr('style', '');
break;
}
});
<section>
<div class="div-1">
<div class="div-2"></div>
<div class="div-3"></div>
</div>
<div class="div-4"></div>
</section>
<hr />
<ul>
<li>
<p>div-1</p>
<p><input type="radio" name="div-1" value="0" />none</p>
<p><input type="radio" name="div-1" value="1" />float</p>
<p><input type="radio" name="div-1" value="2" />inline-block</p>
<p><input type="radio" name="div-1" value="3" />absolute</p>
<p><input type="radio" name="div-1" value="4" />not visible</p>
</li>
<li>
<p>div-2</p>
<p><input type="radio" name="div-2" value="0" />none</p>
<p><input type="radio" name="div-2" value="1" />float</p>
<p><input type="radio" name="div-2" value="2" />inline-block</p>
<p><input type="radio" name="div-2" value="3" />absolute</p>
<p><input type="radio" name="div-2" value="4" />not visible</p>
</li>
<li>
<p>div-3</p>
<p><input type="radio" name="div-3" value="0" />none</p>
<p><input type="radio" name="div-3" value="1" />float</p>
<p><input type="radio" name="div-3" value="2" />inline-block</p>
<p><input type="radio" name="div-3" value="3" />absolute</p>
<p><input type="radio" name="div-3" value="4" />not visible</p>
</li>
<li>
<p>div-4</p>
<p><input type="radio" name="div-4" value="0" />none</p>
<p><input type="radio" name="div-4" value="1" />float</p>
<p><input type="radio" name="div-4" value="2" />inline-block</p>
<p><input type="radio" name="div-4" value="3" />absolute</p>
<p><input type="radio" name="div-4" value="4" />not visible</p>
</li>
</ul>
section {
height: 200px;
}
li {
margin-right: 20px;
display: inline-block;
}
div {
width: 100%;
height: 30px;
background: #fff;
clear: both;
}
.div-1 {
height: auto;
}
.div-2 {
margin-bottom: 10px;
background: #000;
}
.div-3 {
margin-top: 20px;
margin-bottom: 20px;
background: #fe0002;
}
.div-4 {
margin-top: 10px;
background: #ffcb01;
}