嗨我有一个图像审查系统，它有一个向下滑动的标题和一个悬停在图像上方的上滑标题。在顶部标题内部，我一直在尝试将标题左侧的评论小部件与标题右侧的几个共享按钮对齐。我有标题中的元素，但似乎无法让它们对齐。
我试图在这里添加外部css：http://jsfiddle.net/dottsie/nj0mgwdr/1/
我无法弄清楚如何让外部工作，所以我将它们粘贴在这里：
component.css：
.grid {
padding: 20px 20px 100px 20px;
max-width: 1300px;
margin: 0 auto;
list-style: none;
text-align: center;
}
.grid li {
display: inline-block;
width: 440px;
margin: 0;
padding: 20px;
text-align: left;
position: relative;
}
.grid figure {
margin: 0;
position: relative;
}
.grid figure img {
max-width: 100%;
display: block;
position: relative;
}
.grid figcaption
{
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #49484A;
color: #ed4e6e;
}
.grid share-buttons {
position: absolute;
top: 0;
left: 0;
padding: 20px;
}
.grid figcaption h3 {
margin: 0;
padding: 0;
color: #fff;
}
.grid figcaption span:before {
content: 'by ';
}
.grid figcaption a {
text-align: center;
padding: 1px 1px;
border-radius: 2px;
display: inline-block;
background: #ed4e6e;
color: #fff;
}
figcaption2
{
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #49484A;
color: #ed4e6e;
}
figcaption2 h3 {
margin: 0;
padding: 0;
color: #fff;
}
figcaption2 span:before
{
content: 'by ';
}
figcaption2 a
{
text-align: center;
padding: 1px 1px;
border-radius: 2px;
display: inline-block;
background: #ed4e6e;
color: #fff;
}
/* Caption Style 1 */
.cs-style-1 figure {
overflow: hidden;
}
.cs-style-1 figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.no-touch .cs-style-1 figure:hover img,
.cs-style-1 figure.cs-hover img {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.cs-style-1 figcaption {
height: 100px;
width: 100%;
top: auto;
bottom: 0;
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .cs-style-1 figure:hover figcaption,
.cs-style-1 figure.cs-hover figcaption {
opacity: .95;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
.cs-style-1 figcaption a {
position: absolute;
bottom: 20px;
right: 20px;
}
/* Caption Style 2 */
.cs-style-2 figure {
overflow: hidden;
}
.cs-style-2 figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.no-touch .cs-style-2 figure:hover img,
.cs-style-2 figure.cs-hover img {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.cs-style-2 figcaption2 {
height: 100px;
width: 100%;
top: 0;
bottom: auto;
opacity: 0;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s ease-out;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s ease-out;
transition: transform 0.4s, opacity 0.1s 0.3s ease-out;
}
.no-touch .cs-style-2 figure:hover figcaption2,
.cs-style-2 figure.cs-hover figcaption2 {
opacity: 0.95;
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s ease-out;
-moz-transition: -moz-transform 0.4s, opacity 0.1s ease-out;
transition: transform 0.4s, opacity 0.1s ease-out;
}
.cs-style-2 figcaption2 a {
position: absolute;
top: 20px;
right: 20px;
}
.share-buttons {
width:auto;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
.share-buttons.facebook {
background: url('images/facebook.png') no-repeat;
float:left;
height: 18px;
padding:2px;
width: 32px;
}
.share-buttons.twitter {
background: url('images/twitter.png') no-repeat;
float: right;
height: 28px;
padding: 2px;
width: 32px;
}
.share-buttons.pinterest {
background: url('images/pinterest.png') no-repeat;
float: right;
height: 28px;
padding: 2px;
width: 32px;
}
.share-buttons.google_plus {
background: url('images/google_plus.png') no-repeat;
float: right;
height: 28px;
padding: 2px;
width: 32px;
}
/* rating widget */
.rate_widget{
border: 0px solid #CCC;
overflow: visible;
padding: 10px;
position: inherit;
width: 180px;
height: 15px;
}
.ratings_stars{
background: url('images/star_empty.png') no-repeat;
float: left;
height: 28px;
padding: 2px;
width: 32px;
}
.ratings_vote{
background: url('images/star_full.png') no-repeat;
}
.ratings_over{
background: url('images/star_highlight.png') no-repeat;
}
.total_votes {
background: #A6A6A6;
top: 28px;
left: 20px;
padding: 5px;
position: absolute;
}
.movie_choice{
font: 10px verdana, sans-serif;
margin: 0 auto 10px auto;
width: 180px;
}
default.css:
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #b3b9bf;
background: #f9f9f9;
}
a {
color: #888;
text-decoration: none;
}
a:hover,
a:active {
color: #333;
}
/* Header Style */
.container > header {
border:10px solid #fff;
position:relative;
overflow:hidden;
/* height:auto; */
/*width:auto;*/
}
.container > header h1 {
font-size: 2.625em;
line-height: 1.3;
margin: 0;
font-weight: 300;
}