<html>
<head>
<style>
div {
height:50px;
}
#container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
#container div {
width: 16.6666%;
display: inline-block;
float: left;
}
#d0 {
background-color: pink;
}
#d1 {
background-color: red;
}
#d2 {
background-color: orange;
}
#d3 {
background-color: yellow;
}
#d4 {
background-color: gray;
}
#d5 {
background-color: violet;
}
</style>
</head>
<body>
<div id="container">
<div id="d0">
</div>
<div id="d1">
</div>
<div id="d2">
</div>
<div id="d3">
</div>
<div id="d4">
</div>
<div id="d5">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
});
var divs = $("#container div");
var initialWidth = 100.0 / divs.length;
divs.width(initialWidth + "%");
divs.click(function() {
SelectDiv($(this));
});
function SelectDiv(div) {
divs.width(initialWidth / 2 + "%");
div.width(100 - initialWidth *(divs.length - 1) / 2 + "%");
}
</script>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.