嗨我有一个图像审查系统，它有一个向下滑动的标题和一个悬停在图像上方的上滑标题。在顶部标题中，我一直在尝试将标题左侧的评论小部件与标题右侧的几个共享按钮对齐。我有标题中的元素，但似乎无法让它们对齐。
这里是小提琴：http://jsfiddle.net/dottsie/nj0mgwdr/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>review system</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<script src="js/newjavascript.js"></script>
<script src="js/jquery.js"></script>
<script src="js/toucheffects.js"></script>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<h1>Caption Hover Effects</h1>
</header>
<ul class="grid cs-style-1 cs-style-2">
<li>
<figure>
<img src="http://www.ruggit.dk/media/catalog/product/cache/1/image/650x/040ec09b1e35df139433887a97daa66f/_/m/_mg_9746_1.jpg" alt="img04">
<figcaption>
<h3>Settings</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1116685-Settings">Take a look</a>
</figcaption>
<figcaption2>
<h3></h3>
<div class='movie_choice'>
<div id="r1" class="rate_widget">
<div class="star_1 ratings_stars"></div>
<div class="star_2 ratings_stars"></div>
<div class="star_3 ratings_stars"></div>
<div class="star_4 ratings_stars"></div>
<div class="star_5 ratings_stars"></div>
<div class="total_votes">vote data</div>
</div>
<div id="share-buttons">
<div id="facebook share-buttons"></div>
<div id="twitter share-buttons"></div>
<div id="pinterest share-buttons"></div>
<div id="google_plus share-buttons"></div>
</div>
</figcaption2>
</figure>
</li>
<li>
<figure>
<img src="http://www.ruggit.dk/media/catalog/product/cache/1/image/650x/040ec09b1e35df139433887a97daa66f/_/m/_mg_9746_1.jpg" alt="img04">
<figcaption>
<h3>Settings</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1116685-Settings">Take a look</a>
</figcaption>
<figcaption2> <h3>Settings</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1116685-Settings">Take a look</a> </figcaption2>
</figure>
</li>
<li>
<figure>
<img src="http://www.ruggit.dk/media/catalog/product/cache/1/image/650x/040ec09b1e35df139433887a97daa66f/_/m/_mg_9746_1.jpg" alt="img04">
<figcaption>
<h3>Settings</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1116685-Settings">Take a look</a>
</figcaption>
<figcaption2> <h3>Settings</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1116685-Settings">Take a look</a> </figcaption2>
</figure>
</li>
<li>
<figure>
<img src="http://www.ruggit.dk/media/catalog/product/cache/1/image/650x/040ec09b1e35df139433887a97daa66f/_/m/_mg_9746_1.jpg" alt="img04">
<figcaption>
<h3>Settings</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1116685-Settings">Take a look</a>
</figcaption>
</figure>
<figure>
<figcaption2> <h3>Settings</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1116685-Settings">Take a look</a> </figcaption2>
</figure>
</li>
<li>
<figure>
<img src="http://www.ruggit.dk/media/catalog/product/cache/1/image/650x/040ec09b1e35df139433887a97daa66f/_/m/_mg_9746_1.jpg" alt="img04">
<figcaption>
<h3>Settings</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1116685-Settings">Take a look</a>
</figcaption>
<figcaption2> <h3>Settings</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1116685-Settings">Take a look</a> </figcaption2>
</figure>
</li>
<li>
<figure>
<img src="http://www.ruggit.dk/media/catalog/product/cache/1/image/650x/040ec09b1e35df139433887a97daa66f/_/m/_mg_9746_1.jpg" alt="img04">
<figcaption>
<h3>Settings</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1116685-Settings">Take a look</a>
</figcaption>
<figcaption2> <h3>Settings</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1116685-Settings">Take a look</a> </figcaption2>
</figure>
</li>
</ul>
</div>
</div><!-- /container -->
</div>
<script>
// first thing added
$(document).ready(function() {
$('.rate_widget').each(function(i) {
var widget = this;
var out_data = {
widget_id : $(widget).attr('id'),
fetch: 1
};
$.post({
url:'php/ratings.php',
data: out_data,
success:function(INFO) {
$(widget).data( 'fsr', INFO );
set_votes(widget);
},
dataType:'json'
});
});
$('.ratings_stars').hover(
// Handles mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).nextAll().removeClass('ratings_vote');
},
// Handles mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
// can't use 'this' because it wont contain the updated data
set_votes($(this).parent());
}
);
// records the vote
$('.ratings_stars').bind('click', function() {
var star = this;
var widget = $(this).parent();
var clicked_data = {
clicked_on : $(star).attr('class'),
widget_id : $(star).parent().attr('id')
};
$.post(
{
url:'php/ratings.php',
data: clicked_data,
success:function(INFO) {
widget.data( 'fsr', INFO );
set_votes(widget);
},
dataType:'json'
});
});
function set_votes(widget) {
var avg = $(widget).data('fsr').whole_avg;
var votes = $(widget).data('fsr').number_votes;
var exact = $(widget).data('fsr').dec_avg;
window.console && console.log('and now in set_votes, it thinks the fsr is ' + $(widget).data('fsr').number_votes);
$(widget).find('.star_' + avg).prevAll().andSelf().addClass('ratings_vote');
$(widget).find('.star_' + avg).nextAll().removeClass('ratings_vote');
$(widget).find('.total_votes').text( votes + ' votes recorded (' + exact + ' rating)' );
}
});
</script>
</body>
</html>