Aligner les blockquotes Tumblr ci-dessous, pas à l'intérieur les uns des autres

Question

Je suis un débutant en HTML/CSS. J'ai décidé de l'apprendre afin que je puisse coder mon propre thème Tumblr (et je suis fier de dire que c'est presque fini!). J'essaie de styler les réponses, qui sont sous la forme de blockquotes. Je veux qu'ils s'alignent les uns sur les autres, comme des rectangles les uns après les autres (comme dans les messages du forum, etc.) mais je ne sais pas comment. À l'heure actuelle, ils empilent dans l'autre, comme par défaut:

Vous pouvez voir le problème ... 1

Toutes les suggestions seraient grandement appréciés. S'il vous plaît et merci :)

Answer 1

La variable {Caption} ne permet aucune manipulation, vous devrez donc utiliser un script. Il y a un plugin disponible pour réaliser ceci cependant, voir un-nest tumblr captions. Alternativement, si vous regardez dans le nouveau code du thème tumblr par défaut, vous verrez qu'il y a une multitude de variables non documentées qu'ils ont utilisées pour y parvenir.

Pour un poste de photo, c'est le code qu'ils ont:

{block:NotReblog} 
<figcaption class="caption"> 
    {Caption} 
</figcaption> 
{/block:NotReblog} 

{block:RebloggedFrom} 
<div class="reblog-list"> 
    {block:Reblogs} 
    <div class="post-reblog-trail-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}"> 
     <div class="post-reblog-header"> 
      <div class="post-avatar"> 
       <div class="post-avatar-wrapper"> 
        {block:IsActive} 
        <a class="post-avatar-link{block:isNotOriginalEntry} sub-icon-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> 
         <img class="post-avatar-image" src="{PortraitURL-64}"> 
        </a> 
        {/block:IsActive} 
        {block:IsDeactivated} 
        <span class="inactive reblog-avatar{block:isNotOriginalEntry} sub-icon-reblog{/block:isNotOriginalEntry}"> 
         <img class="post-avatar-image" src="{PortraitURL-64}"> 
        </span> 
        {/block:IsDeactivated} 
       </div> 
      </div> 
      {block:IsActive} 
      <a target="_blank" class="post-tumblelog-name" href="{Permalink}">{Username}</a> 
      {/block:IsActive} 
      {block:IsDeactivated} 
      <span class="inactive post-tumblelog-name">{Username}</span> 
      {/block:IsDeactivated} 
     </div> 
     <div class="post-reblog-content"> 
      <div class="post-body"> 
       {Body} 
      </div> 
     </div> 
    </div> 
    {/block:Reblogs} 
</div> 
{/block:RebloggedFrom} 

également une note de côté: De mon expérimenter avec le code ci-dessus, si vous changez {Portrait-64} à l'une des autres tailles avatar standard tumblr (comme 30, 24 etc.) il reviendra juste au blog que vous êtes sur l'avatar.