中间对齐元素与图像没有包装在div？

Question

试图帮助她的Squarespace网站的朋友。在主页上是文章列表，在标题下面是漂浮在标题左边的图像，按钮和带有一些跨度链接的div。不幸的是，标题，按钮和跨度链接不会被封装在自己的div中。

重要的是要注意，我不能在这里更改实际的HTML结构，否则这将是非常容易的。 我唯一的选择是CSS和JavaScript。 http://aikaslovecloset.com

公告的标题与图像，这看起来更高图像还挺不错的顶部的对齐方式：

您可以在网站在这里检查出HTML。是的，我建议她只使用水平图像，但我认为这不适合风格的博客作者。有没有人有任何疯狂的CSS技巧把它推到图像的中间，对图像高度作出响应？

Answer 1

嘿，有些人会讨厌这个（这是正确的），但有一种方法，如果它是一个绝对的必要性（但你决定确定）通过使用jQuery DOM操作。简单地说，将每个.entry-footer附加到类.entry-content的前一个兄弟。然后在每个.entry-content中，将除了.excerpt-thumb之外的每个子元素（现在包含页脚）都包装在一个新div中。样式.entry-thumb和新的div为display: inline-block; vertical-align: middle;。确保从.entry-thumb删除浮动。

我已经简化了代码论证的目的：

$('.view-list .entry-footer').each(function(){ 
 
     $(this).appendTo($(this).prev('.entry-content'));   
 
}); 
 
$('.view-list .entry-content').each(function(){ 
 
    $(this).children().not('.excerpt-thumb').wrapAll('<div class="new-div" />'); 
 
});

article { 
 
display: block; 
 
} 
 
.excerpt-thumb { 
 
    display: inline-block; 
 
    height: auto; 
 
    margin: 0 1.5em 1.5em 0; 
 
    overflow: auto; 
 
    width: 67%; 
 
    float: none; 
 
    vertical-align: middle; 
 
} 
 
.entry-title, .entry-content { 
 
    text-align: center; 
 
} 
 
.clear::after { 
 
    clear: both; 
 
    content: "."; 
 
    display: block; 
 
    font-size: 0; 
 
    height: 0; 
 
    visibility: hidden; 
 
} 
 
.entry-footer { 
 
    display: block; 
 
    text-align: center; 
 
} 
 
.excerpt-thumb img { 
 
    height: auto !important; 
 
    left: auto !important; 
 
    top: auto !important; 
 
    width: 100% !important; 
 
} 
 
.new-div { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div class="view-list"> 
 
<article> 
 
<header class="entry-header">article 1</header> 
 
<div class="entry-content"> 
 
    <div class="excerpt-thumb"> 
 
    <img data-image-focal-point="0.45806318271659807,0.5180000305175781" data-image-dimensions="2500x3750" data-image="https://static1.squarespace.com/static/579e8e0a37c581f9480799ab/579e8ee42109d3fc32bf7bcb/57eb59d2e6f2e1db2856bb18/1475374638274/Aika+Testing+testing+1+2+3-Aika-0049.jpg" data-src="https://static1.squarespace.com/static/579e8e0a37c581f9480799ab/579e8ee42109d3fc32bf7bcb/57eb59d2e6f2e1db2856bb18/1475374638274/Aika+Testing+testing+1+2+3-Aika-0049.jpg" style="top: 0px; left: 0px; width: 544px; height: 816px; position: relative;" alt="Silk Feel, Slip Dress Obsession " class="" src="https://static1.squarespace.com/static/579e8e0a37c581f9480799ab/579e8ee42109d3fc32bf7bcb/57eb59d2e6f2e1db2856bb18/1475374638274/Aika+Testing+testing+1+2+3-Aika-0049.jpg?format=750w" data-image-resolution="750w"> 
 
    </div> 
 
    <div class="p-summary"> 
 
    article 1 p-summary 
 
    </div> 
 
    <p class="entry-more-link">article 1 entry-more-link</p> 
 
</div> 
 
<footer class="entry-footer clear">article 1 footer</footer> 
 
</article> 
 
<article> 
 
<header class="entry-header">article 2</header> 
 
<div class="entry-content"> 
 
    <div class="excerpt-thumb"> 
 
    <img data-image-focal-point="0.45806318271659807,0.5180000305175781" data-image-dimensions="2500x3750" data-image="https://static1.squarespace.com/static/579e8e0a37c581f9480799ab/579e8ee42109d3fc32bf7bcb/57eb59d2e6f2e1db2856bb18/1475374638274/Aika+Testing+testing+1+2+3-Aika-0049.jpg" data-src="https://static1.squarespace.com/static/579e8e0a37c581f9480799ab/579e8ee42109d3fc32bf7bcb/57eb59d2e6f2e1db2856bb18/1475374638274/Aika+Testing+testing+1+2+3-Aika-0049.jpg" style="top: 0px; left: 0px; width: 544px; height: 816px; position: relative;" alt="Silk Feel, Slip Dress Obsession " class="" src="https://static1.squarespace.com/static/579e8e0a37c581f9480799ab/579e8ee42109d3fc32bf7bcb/57eb59d2e6f2e1db2856bb18/1475374638274/Aika+Testing+testing+1+2+3-Aika-0049.jpg?format=750w" data-image-resolution="750w"> 
 
    </div> 
 
    <div class="p-summary"> 
 
    article 2 p-summary 
 
    </div> 
 
    <p class="entry-more-link">article 2 entry-more-link</p> 
 
</div> 
 
<footer class="entry-footer clear">article 2 footer</footer> 
 
</article> 
 
</div>

这是严重的，但它的存在。但是你所寻求的解决方案对于HTML来说目前是不可能的。

Answer 2

尝试使用只有在“P-总结”阶级“填充顶”：

.p-summary { 
    padding-top: 50px; 
} 

Answer 3

当我处理Squarespace和陷入这种麻烦的，我使用jQuery来换东西（肮脏的解决方案，但它的工作原理）

$(".p-summary, .entry-more-link").wrapAll("<div></div>");

这段代码包的标题和按钮一个div。