Question

尝试用她的Squarespace网站帮助朋友。在主页上是一个文章列表，标题下面是浮动在标题，按钮和带有一些跨度链接的div左侧的图像。不幸的是，标题，按钮和跨度链接没有包装在它们自己的div中。

重要的是要注意我无法在此处更改实际的HTML结构，否则这将非常简单。 我唯一的选择是CSS和javascript。

您可以在以下网站查看HTML：http://aikaslovecloset.com

注意标题如何与图像的顶部对齐，这对于较高的图像看起来有点不好。是的，我建议她只使用水平图像，但我认为这对于风格博客来说并不理想。有没有人有任何疯狂的CSS技巧将其推到图像中间，以响应图像高度？

Answer 1

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

我为示范目的简化了代码：

＆＃13;

$('.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" />');
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

很糟糕，但它就在那里。但是你所寻求的解决方案不可能像现在这样使用HTML。

Answer 2

当我处理Squarespace并遇到这种麻烦时，我使用Jquery来包装东西（Dirty solution但它有效）

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

这段代码将标题和按钮包装在div中。

Answer 3

尝试仅在'p-summary'类中使用'padding-top'：

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

中间对齐带有图像的元素而没有包裹在div中？

3 个答案: