中间对齐元素与图像没有包装在div?
试图帮助她的Squarespace网站的朋友。在主页上是文章列表,在标题下面是漂浮在标题左边的图像,按钮和带有一些跨度链接的div。不幸的是,标题,按钮和跨度链接不会被封装在自己的div中。中间对齐元素与图像没有包装在div?
重要的是要注意,我不能在这里更改实际的HTML结构,否则这将是非常容易的。 我唯一的选择是CSS和JavaScript。 http://aikaslovecloset.com
公告的标题与图像,这看起来更高图像还挺不错的顶部的对齐方式:
您可以在网站在这里检查出HTML。是的,我建议她只使用水平图像,但我认为这不适合风格的博客作者。有没有人有任何疯狂的CSS技巧把它推到图像的中间,对图像高度作出响应?
嘿,有些人会讨厌这个(这是正确的),但有一种方法,如果它是一个绝对的必要性(但你决定确定)通过使用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来说目前是不可能的。
尝试使用只有在“P-总结”阶级“填充顶”:
.p-summary {
padding-top: 50px;
}
当我处理Squarespace和陷入这种麻烦的,我使用jQuery来换东西(肮脏的解决方案,但它的工作原理)
$(".p-summary, .entry-more-link").wrapAll("<div></div>");
这段代码包的标题和按钮一个div。
肯定已经在Squarespace中用jQuery得到了一些东西。我会先试试这个,如果我不能做到这一点,我会尝试丹尼尔的。谢谢! – Jesse
如果您显示(图片或其他方式)问题的具体情况,您可以更轻松,更快速地找到问题所在...... – Dekel
我认为您没有将额外的元素(标题/按钮)包装在自己的容器中,从而使自己陷入困境。 –
@TylerSebastian我没有写HTML代码。它是Squarespace模板的一部分,我可以更改源代码的唯一方法是启用“Developer Mode”,该模式禁用所有拖放编辑功能。如果我有选择用div来包装东西的话,我会的。 – Jesse