我的tumblr主题似乎有一个相当独特的问题。这是我的第一次，并且在很长一段时间内第一次编码，似乎无法找出它有什么问题。
就像tumblr上的任何博客块一样，我的帖子下面有标题，注释和标签。基本上，有三个级别的内容;首先是照片，然后是标题或描述，最后是注释/标签，所有这些都是在它之前的一层之下。
它适用于文字，聊天，报价和链接帖子。它看起来应该是它应该的样子，我将添加它的截图。 http://i.imgur.com/Bv5Iy4l.png
在照片，照片和视频上，照片或视频旁边的音符和标签会向右跳转。 任何人都可以找出原因吗？我现在已经仔细审查了我主题的每一寸，但找不到理由。
我也会添加此截图。 http://i.imgur.com/50sBD1j.png
其余部分将复制/粘贴相关代码。如果有人能看一眼，我真的很感激。
标记和css位：
#articleblock
{
display: table;
width: 100%;
margin-top: 70px;
}
#articlebuttons ul
{
display: table-cell;
text-align: center;
list-style: none outside none;
width: 60px;
}
#articlebuttons li
{
padding: 0px 0px 15px 0px;
}
#articlebody
{
display: table-cell;
padding: 0px 20px 0px 30px;
vertical-align: top;
font-family: Open Sans;
letter-spacing: 0.015em;
text-align: justify;
font-size: 85%;
width: 100%;
}
#bodymodel a
{
color: #33a4cd;
text-decoration: none;
border-bottom: dotted 1px #33a4cd;
line-height: 1.75;
}
#articlefooter
{
margin-top: 20px;
border-top: solid 1px #8d8d8d;
display: table;
width: 100%;
}
#articlefooter_notes
{
vertical-align: top;
padding-left: 5px;
width: 100px;
font-family: Roboto Condensed;
font-size: 90%;
display: table-cell;
color: #444;
}
#articlefooter_tags ul li
{
position: relative;
top: -14px;
list-style-type: none;
padding-right: 5px;
font-family: Roboto Condensed;
font-size: 90%;
display: table-cell;
color: #444;
}
#articlefooter a:link, a:visited, a:active
{
color: #444;
text-decoration: none;
line-height: 1.75;
}
#articlefooter a:hover
{
color: #444;
text-decoration: none;
border-bottom: dotted 1px #444;
line-height: 1.75;
}<div id="articleblock">
<div id="articlebuttons">
<ul>
<li><img src="http://static.tumblr.com/3jz0ga1/XTwnc4y6k/icon-picture.png" width="60" height="64" alt=""></li>
<li><a href=""><img src="http://static.tumblr.com/3jz0ga1/q5cnc3thu/button-like.png" width="17" height="16"></a></li>
<li><a href=""><img src="http://static.tumblr.com/3jz0ga1/OsLnc3thu/button-reblog.png" width="17" height="16"></a></li>
<li><a href=""><img src="http://static.tumblr.com/3jz0ga1/DIlnc3thv/button-tweet.png" width="20" height="16"></a></li>
<li><a href=""><img src="http://static.tumblr.com/3jz0ga1/RzSnc3tht/button-facebook.png" width="8" height="16"></a></li>
</ul>
</div>
<div id="articlebody">
<center><a href="http://jubileetheme.tumblr.com/image/97873714593"><img src="http://38.media.tumblr.com/4f36f7541c9d11a42208526b64520122/tumblr_nc4zk3LKgy1tmsy4wo1_500.jpg"></a></center>
<div id="bodymodel"><p><span>Aenean tincidunt ac sapien at volutpat. Praesent eu diam lobortis, sagittis dolor tincidunt, rutrum nisl. Aenean molestie augue risus, eget tempus turpis eleifend nec. Pellentesque hendrerit tellus eget dui bibendum, quis varius orci cursus.</span></p></div>
</div>
<div id="articlefooter">
<div id="articlefooter_notes"><a href="http://jubileetheme.tumblr.com/post/97873714593/aenean-tincidunt-ac-sapien-at-volutpat-praesent">0 notes</a></div>
<div id="articlefooter_tags">
<ul>
<li><a href="http://jubileetheme.tumblr.com/tagged/mountain">#mountain</a></li><li><a href="http://jubileetheme.tumblr.com/tagged/beauty">#beauty</a></li>
</ul>
</div>
</div>
</div>
答案 0 :(得分：1)
您的CSS基于display: table，但您在子项上应用了块/表/表格单元格。这并不总是按预期工作。我修改了你的CSS以使用浮点数。 display: flex是要走的路，但现在它的浏览器支持有限。
#articleblock {
margin-top: 70px;
}
#articlebuttons {
float: left;
width: 100px;
}
#articlebuttons ul {
margin: 0;
padding: 0 0 0 40px;
width: 60px;
text-align: center;
list-style: none;
}
#articlebuttons li {
padding: 0 0 15px 0;
}
#articlebody {
margin-left: 100px;
padding: 0 40px;
font-family: Open Sans;
font-size: 85%;
text-align: justify;
letter-spacing: 0.015em;
}
#articlefooter {
margin-top: 20px;
margin-left: 100px;
border-top: solid 1px #8d8d8d;
overflow: hidden;
}
#articlefooter_notes {
float: left;
padding-left: 5px;
width: 100px;
font-family: Roboto Condensed;
font-size: 90%;
color: #444;
}
#articlefooter_tags {
float: left;
font-family: Roboto Condensed;
font-size: 90%;
color: #444;
}
#articlefooter_tags ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#articlefooter_tags li {
float: left;
padding-right: 5px;
}
/* dont care section */
#bodymodel a {
border-bottom: dotted 1px #33a4cd;
line-height: 1.75;
color: #33a4cd;
text-decoration: none;
}
#articlefooter a:link, a:visited, a:active {
line-height: 1.75;
color: #444;
text-decoration: none;
}
#articlefooter a:hover {
border-bottom: dotted 1px #444;
line-height: 1.75;
color: #444;
text-decoration: none;
}<div id="articleblock">
<div id="articlebuttons">
<ul>
<li><img src="http://static.tumblr.com/3jz0ga1/XTwnc4y6k/icon-picture.png" width="60" height="64" alt=""></li>
<li><a href=""><img src="http://static.tumblr.com/3jz0ga1/q5cnc3thu/button-like.png" width="17" height="16"></a></li>
<li><a href=""><img src="http://static.tumblr.com/3jz0ga1/OsLnc3thu/button-reblog.png" width="17" height="16"></a></li>
<li><a href=""><img src="http://static.tumblr.com/3jz0ga1/DIlnc3thv/button-tweet.png" width="20" height="16"></a></li>
<li><a href=""><img src="http://static.tumblr.com/3jz0ga1/RzSnc3tht/button-facebook.png" width="8" height="16"></a></li>
</ul>
</div>
<div id="articlebody">
<center><a href="http://jubileetheme.tumblr.com/image/97873714593"><img src="http://38.media.tumblr.com/4f36f7541c9d11a42208526b64520122/tumblr_nc4zk3LKgy1tmsy4wo1_500.jpg"></a></center>
<div id="bodymodel">
<p><span>Aenean tincidunt ac sapien at volutpat. Praesent eu diam lobortis, sagittis dolor tincidunt, rutrum nisl. Aenean molestie augue risus, eget tempus turpis eleifend nec. Pellentesque hendrerit tellus eget dui bibendum, quis varius orci cursus.</span></p>
</div>
</div>
<div id="articlefooter">
<div id="articlefooter_notes">
<a href="http://jubileetheme.tumblr.com/post/97873714593/aenean-tincidunt-ac-sapien-at-volutpat-praesent">0 notes</a></div>
<div id="articlefooter_tags">
<ul>
<li><a href="http://jubileetheme.tumblr.com/tagged/mountain">#mountain</a></li><li><a href="http://jubileetheme.tumblr.com/tagged/beauty">#beauty</a></li>
</ul>
</div>
</div>
</div>