CSS-Anzeige: Block funktioniert nicht in verwandten Artikeln

Question

Ich versuche, den Stil des kontextbezogenen Posts Plugin für Wordpress zu ändern. Ich habe diesen Stil: http://kevin.deldycke.com/2012/04/beautify-contextual-related-posts-wordpress-plugin/ Und durch Versuch und Irrtum, machte dies aus ihm heraus:

.crp_related { 
    clear: both; 
    margin: 10px 0; 
    display: block; 
} 
.crp_related h3 { 
    margin: 0 !important; 
} 
.crp_related ul { 
    list-style: none; 
    float: left; 
    margin: 0 !important; 
    padding: 0 !important; 
    display: block; 
} 
.crp_related li, .crp_related a { 
    float: left; 
    overflow: hidden; 
    position: relative; 
    text-align: left; 
    display: block; 
} 
.crp_related li { 
    margin: 5px !important; 
    display: block; 
} 
.crp_related a:hover { 
    text-decoration: underline; 
} 
.crp_related .crp_title { 
    color: #000; 
    position: relative; 
    left: 15px; 
    font-size: 1.3em; 
    font-weight: bold; 
} 
.crp_related .crp_excerpt { 
    position: relative; 
    left: 15px; 
    color: #333; 
    height: inherit; 
    margin-left: 25px; 
} 
.crp_clear { 
    clear: both; 
} 

Es sieht wie folgt aus: http://nl.meetinghalfway.eu/2013/09/welkom-bij-meeting-halfway/

Das bereits ziemlich ähnlich sieht, was ich will, mit der Ausnahme, dass ich würde wie eine Zeilenumbruch nach dem Titel, und wenn möglich, möchte ich auch den Textausschnitt anklickbar.

Ich habe versucht, die Linie mit der display: block; in verschiedenen Orten zu brechen, aber nichts funktioniert.

Answer 1

Bearbeiten Verbesserte meinen Code und funktioniert einwandfrei für mich!

Um einen Zeilenumbruch hinzufügen können Sie Ihre .crp_related .crp_title und .crp_related .crp_excerpt CSS dies ändern:

.crp_related .crp_title { 
    color: #000; 
    float: none; 
    font-size: 1.3em; 
    font-weight: bold; 
    left: 15px; 
    position: relative; 
    margin-bottom: 30px; /* play with this to add more room under the title */ 
} 

.crp_related .crp_excerpt { 
    color: #333; 
    height: inherit; 
    left: 15px; 
    position: relative; 
} 

einen Link zum excerp würde bedeuten, Hinzufügen, dass Sie den HTML-Code der Seite zu ändern. Sie müssten die PHP-Dateien des Plugins bearbeiten.

Answer 2

Ich habe das Markup verwendet, das ich in dem von Ihnen angegebenen Beispiel gefunden habe, in der Hoffnung, dass es in Ihrem Plugin dasselbe ist. Sie müssen nur display:block und margin-top: 30px in .crp_related .crp_excerpt hinzufügen.

.crp_related { 
 
    clear: both; 
 
    margin: 10px 0; 
 
    display: block; 
 
} 
 
.crp_related h3 { 
 
    margin: 0 !important; 
 
} 
 
.crp_related ul { 
 
    list-style: none; 
 
    float: left; 
 
    margin: 0 !important; 
 
    padding: 0 !important; 
 
    display: block; 
 
} 
 
.crp_related li, 
 
.crp_related a { 
 
    float: left; 
 
    overflow: hidden; 
 
    position: relative; 
 
    text-align: left; 
 
    display: block; 
 
    text-decoration: none; 
 
} 
 
.crp_related li { 
 
    margin: 5px !important; 
 
    display: block; 
 
} 
 
.crp_related a:hover { 
 
    text-decoration: underline; 
 
} 
 
.crp_related .crp_title { 
 
    color: #000; 
 
    position: relative; 
 
    left: 15px; 
 
    font-size: 1.3em; 
 
    font-weight: bold; 
 
} 
 
.crp_related .crp_excerpt { 
 
    position: relative; 
 
    left: 15px; 
 
    color: #333; 
 
    height: inherit; 
 
    margin-left: 25px; 
 
    margin-top: 30px; 
 
    display: block; 
 
} 
 
.crp_clear { 
 
    clear: both; 
 
}

<div class="crp_related "> 
 
    <h3>Das könnte dir auch gefallen…</h3> 
 
    <hr> 
 
    <ul> 
 
    <li> 
 
     <a href="http://nl.meetinghalfway.eu/2014/01/15-wensen-voor-2014/"> 
 
     <img src="http://nl.meetinghalfway.eu/wp-content/uploads/sites/14/2014/01/hopes2014featured-150x150.jpg" alt="15 wensen voor 2014" title="15 wensen voor 2014" width="150" height="150" class="crp_thumb crp_featured"> 
 
     </a><a href="http://nl.meetinghalfway.eu/2014/01/15-wensen-voor-2014/" class="crp_title">15 wensen voor 2014</a><span class="crp_excerpt"> Dit nieuwe jaar zal een belangrijke zijn voor onze continent, met verkiezingen in het Europees Parlement en het economische crisis nog niet opgelost. 15 leden van het Meeting Halfway team delen hun wensen en verwachtingen voor Europa in 2014.</span> 
 
    </li> 
 
    <hr> 
 
    <li> 
 
     <a href="http://nl.meetinghalfway.eu/2013/10/groot-brittannie-of-klein-brittannie/"> 
 
     <img src="http://nl.meetinghalfway.eu/wp-content/uploads/sites/14/2013/10/20131001-Great-Britain-or-little-Britain-1-Clare-Jordan-photographer-Clare-Jordan-150x150.jpg" alt="Groot-Brittannië of klein Brittannië?" title="Groot-Brittannië of klein Brittannië?" 
 
     width="150" height="150" class="crp_thumb crp_featured"> 
 
     </a><a href="http://nl.meetinghalfway.eu/2013/10/groot-brittannie-of-klein-brittannie/" class="crp_title">Groot-Brittannië of klein Brittannië?</a><span class="crp_excerpt"> De Britten zijn berucht voor hun gebrek aan talenkennis. Volgens een gepubliceerde enquête van de British Council is 78% van de Britse bevolking niet in staat om een tweede taal te spreken.</span> 
 
    </li> 
 
    <hr> 
 
    <li> 
 
     <a href="http://nl.meetinghalfway.eu/2013/10/mijn-twee-talen/"> 
 
     <img src="http://nl.meetinghalfway.eu/wp-content/uploads/sites/14/2013/10/20130930-Bilingual-student-1-Eva-Lietavová-@Private-150x150.jpg" alt="Mijn Twee Talen" title="Mijn Twee Talen" width="150" height="150" class="crp_thumb crp_featured"> 
 
     </a><a href="http://nl.meetinghalfway.eu/2013/10/mijn-twee-talen/" class="crp_title">Mijn Twee Talen</a><span class="crp_excerpt"> Ze heeft altijd van de Franse taal gehouden. Om deze simpele reden besloot Eva zich op een tweetalige middelbare school in te schrijven. Via deze school ging ze naar de universiteit, waar ze nu Frans studeert. Zo triviaal als het nu misschien lijkt, slechts een paar jaar geleden had Eva geen idee hoe haar leven zou veranderen.</span> 
 
    </li> 
 
    <hr> 
 
    </ul> 
 
    <div class="crp_clear"></div> 
 
</div>