Why does this div drop down when InnterHtml is changed?
Question
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:
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>
5 answers
solution1
4 ACCPTED 2013-08-18 07:34:37
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
PS 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
solution2
2 2013-08-18 07:40:36
.thumb {
color: white;
width: 95px;
height: 95px;
margin: 2.5px;
background-color: blue;
float: left;
}
solution3
0 2013-08-18 07:31:46
(function() {
$(".thumb").on("click", function() {
$(this).("something");
});
})();
CSS is
.thumb {
color: white;
width: 95px;
height: 95px;
background-color: blue;
display: inline-block;
float: left;
margin: 2px;
}
Hope it helps
solution4
0 2013-08-18 07:36:00
$(".thumb").on("click", function() {
$(this).append("something");
});
solution5
0
(function() {
$(".thumb").html(" ");
$(".thumb").bind("click", function() {
$("#boogie").html("something");
});
})();
.thumbContainer {
width: 200px;
height:100px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.