圖片縮略圖后的CSS和測試對齊

Question

這是我的小提琴。

如您所見：

我的問題是，我始終希望文本位於縮略圖下方而不是右側。 在桌面站點上可以，但在移動站點上，較短的標題顯示在圖片的右側。 下面是我的相關CSS，所有代碼都放在我的小提琴上。 我該如何優雅地做到這一點，如果可能的話，避免使用！important和其他禁忌的東西。 但是說實話，我現在很沮喪，我只是想解決這個問題...

h2 {
    color: #191A1E;
    font-family: Open Sans,Arial,sans-serif !important;
    font-size: 21px;
}

.su-post-meta {display:none;}

.su-post-title a {
    margin-top: 15px !important;
    float: left;
    color: #191A1E;
}

.su-posts-default-loop .su-post-thumbnail {
    float: left;
    display: block;
    margin-right: 1em;
}

.su-posts-default-loop .su-post-thumbnail img {
    max-width: 225px;
    max-height: 152px;
}
.su-posts-default-loop h2.su-post-title {
    clear: none;
    margin: 0 0 0.3em 0;
    font-size: 1.2em;
    font-weight: bold;
}
.su-posts-default-loop .su-post-meta {
    margin-bottom: 0.7em;
    font-size: 0.8em;
    opacity: 0.6;
    filter: alpha(opacity=60);
}
.su-posts-teaser-loop .su-post:after {
    content: '';
    display: table;
    clear: both;
}

Answer 1

因為您為.su-post-title a和.su-posts-default-loop .su-post-thumbnail賦予float:left ，只需將其刪除即可。 它將解決您的問題。

您更新的CSS：

h2 {
    color: #191A1E;
    font-family: Open Sans,Arial,sans-serif !important;
    font-size: 21px;
}

.su-post-meta {display:none;}

.su-post-title a {
    margin-top: 15px !important;
    color: #191A1E;
}

.su-posts-default-loop .su-post-thumbnail {

    display: block;
    margin-right: 1em;
}






.su-posts-default-loop .su-post-thumbnail img {
    max-width: 225px;
    max-height: 152px;
}
.su-posts-default-loop h2.su-post-title {
    clear: none;
    margin: 0 0 0.3em 0;
    font-size: 1.2em;
    font-weight: bold;
}
.su-posts-default-loop .su-post-meta {
    margin-bottom: 0.7em;
    font-size: 0.8em;
    opacity: 0.6;
    filter: alpha(opacity=60);
}
.su-posts-teaser-loop .su-post:after {
    content: '';
    display: table;
    clear: both;
}

檢查小提琴。

Answer 2

嘗試這個，

刪除float:left .su-posts-default-loop .su-post-thumbnail並添加到.su-post

.su-posts-default-loop .su-post-thumbnail {     
    display: block;
    margin-right: 1em;
}
.su-post{
float:left;   

}

演示版