Menu
I have a div of thumbs and was wanting to change the innerHtml on click; however, whenever I insert something into them, they drop down and I am wanting them to remain in line.
Here is the jsfiddle:
http://jsfiddle.net/jtDzs/
For example, if I wanted to add "something" to the boogie div in:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<title>TITLE</title>
<style>
.thumbContainer {
width: 200px;
}
.thumb {
width: 95px;
height: 95px;
background-color: blue;
display: inline-block;
}
</style>
</head>
<div>
<div class="thumbContainer">
<div id="boogie" class="thumb"></div>
<div class="thumb"></div>
</div>
<div class="thumbContainer">
<div class="thumb"></div>
<div class="thumb"></div>
</div>
<div class="thumbContainer">
<div class="thumb"></div>
<div class="thumb"></div>
</div>
<div class="thumbContainer">
<div class="thumb"></div>
<div class="thumb"></div>
</div>
<div class="thumbContainer">
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
<script>
(function() {
$(".thumb").bind("click", function() {
$("#boogie").html("something");
});
})();
</script>
</body>
</html>
523
For some reason using display: inline-block is causing this problem...
There are two simple solutions:
Overflow: hidden
You can add this line to your class:
overflow: hidden;
Here's the working jsFiddle Demo
Float: left
You can also start using floating to the left instead of display: inline-block and add the wanted margin.
// display: inline-block
float: left
margin: 2.5px;
Here's the working jsFiddle Demo
P.S I guessed you're trying to make this kind of behaviour to every div so I allowed myself to change the html changing command to:
$(this).html("something");
You can change this if you want
161
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
