0

我正在为 Wordpress 开发一个主题。

像往常一样，主页（index.php或home.php）带有帖子摘要和single.php文件以显示某个帖子。

在主页上，图像对齐工作如下：

主页对齐

当我调整页面大小时...

主页对齐 - 调整大小

在里面single.php，它显示如下：

单个帖子

我正在使用这个样式表：

/* Images */

.alignright {
    float:right;
    margin: 0 0 10px 20px;
}
.alignleft {
    float:left;
    margin: 0 20px 10px 0;
}
.aligncenter {
    display: block;
    margin: 0 auto 1px auto;
    clear: both;
}

.wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 4px;
}

.wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
}

.wp-caption p.wp-caption-text {
    font-size: 12px;
    font-style: italic;
    line-height: 20px;
    padding: 0 5px;
    margin: 5px 0;
}

我该如何解决这些问题？最好的问候，六。

注：帖子正文代码为：

<article class="post-9 post type-post status-publish format-standard hentry category-uncategorized tag-ipsum tag-lorem tag-smashing tag-sticky" id="post-9">

    <!-- Display the Post's content in a div box. -->
    <div class="entry">
        <div id="attachment_10" class="wp-caption alignright" style="width: 253px"><a href="http://localhost/~vdenotaris/wordpress/?attachment_id=10" rel="attachment wp-att-10"><img class="size-medium wp-image-10" alt="Smashing Pumpkins" src="http://localhost/~vdenotaris/wordpress/wp-content/uploads/2012/12/SP-Poster-243x300.jpg" width="243" height="300" /></a><p class="wp-caption-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et sapien metus. Nulla  a sollicitudin nunc.</p></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et sapien metus. Nulla a sollicitudin nunc. <ins datetime="2012-12-19T17:23:48+00:00">Donec diam sem, porta id facilisis sit amet</ins>, auctor et justo. Mauris sapien urna, imperdiet imperdiet pharetra in, tempus id augue. Sed vitae leo purus. Donec consectetur porta leo vitae luctus. Sed sed mollis nulla.</p>
        <p>Praesent venenatis gravida pellentesque. Pellentesque sit amet orci sem, vitae gravida massa. Maecenas suscipit volutpat felis. Proin placerat est at ipsum fermentum vulputate.</p>
        <p>In ac erat lacus, ac congue urna. Nunc egestas luctus orci, ut elementum neque gravida vel. Vivamus blandit nunc vitae mauris convallis ac euismod felis ultricies. Phasellus ac ligula lorem, in adipiscing velit. Aliquam auctor ultricies est, vitae condimentum tellus consequat eget.</p>
        <div id="attachment_34" class="wp-caption alignleft" style="width: 250px"><a href="http://localhost/~vdenotaris/wordpress/?attachment_id=34" rel="attachment wp-att-34"><img class="size-medium wp-image-34 " alt="Benuimaru" src="http://localhost/~vdenotaris/wordpress/wp-content/uploads/2012/12/Benimaru-Nikaido-240x300.jpg" width="240" height="300" /></a><p class="wp-caption-text">Benimaru Nikaido</p></div>
        <p>Nulla tempor, ante pulvinar vehicula faucibus, turpis mi pellentesque est, eget egestas lectus nulla vel nisl. Curabitur in turpis id eros ultrices gravida. Nam vel mauris in nibh blandit facilisis et ut dui. Donec in dignissim diam. Maecenas aliquam porttitor sapien, at tempus mauris tincidunt ut. Donec ut lectus id ante fermentum pretium. Curabitur auctor orci eu magna ultrices auctor. Etiam placerat, magna nec ultricies convallis, elit turpis mattis felis, ut dapibus lorem orci in enim. Fusce ipsum felis, commodo et posuere quis, commodo ut lacus. Pellentesque tristique augue varius arcu blandit mollis. Donec aliquam purus vitae augue vehicula placerat. Aenean libero nulla, rutrum in volutpat id, viverra id nunc.</p>
        <ul>
        <li>Quisque auctor consequat sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
        <li>Nullam luctus placerat lorem ornare volutpat. Integer <code>euismod magna</code> a neque fringilla eget mollis orci tristique.</li>
        </ul>
        <pre>Etiam sagittis augue vitae nunc imperdiet ut vehicula diam condimentum. Etiam non massa libero. Nam eget mi felis, nec dapibus neque. Cras viverra eleifend cursus. Aliquam sagittis auctor accumsan. Vivamus tincidunt, metus a varius condimentum, nisl erat commodo libero, et faucibus urna dolor eget nisi. Cras mi lectus, dictum sed volutpat eu, laoreet non mi. Aliquam dolor odio, malesuada sed volutpat et, facilisis sit amet eros.</pre>
        <p>Aenean hendrerit feugiat leo, eget sollicitudin mauris pretium non. Suspendisse potenti. Quisque eget nunc magna. Proin lectus dolor, consequat et vulputate id, vehicula id velit. Cras at elit id turpis luctus pretium sed eu ante.<del> Nunc rutrum pulvinar dapibus. Mauris nisl mauris, porttitor in pulvinar nec, auctor ac felis.</del> Aliquam malesuada purus sed augue condimentum et lacinia turpis porttitor. Donec tempor aliquet ligula, elementum facilisis est congue eget.</p>
        <blockquote><p>Nullam dapibus aliquet sem, vel mollis elit sagittis vel. Etiam quis leo ante, ut ultricies orci.</p></blockquote>
        <p>Mauris eget ipsum orci, et euismod tortor. Integer gravida justo nisl, in dictum eros. Maecenas<strong> venenatis erat eu tortor consequat porttitor eu et lectus</strong>. Maecenas volutpat nibh quis nisl tempor quis faucibus enim rhoncus. Vestibulum placerat, dolor in faucibus lacinia, augue odio rhoncus justo, sed facilisis lectus nulla eget tortor. Donec vitae purus nulla. Quisque ut tellus quis turpis fermentum bibendum. <a title="Sample" href="http://sample">Mauris ullamcorper, massa in suscipit luctus, metus dui auctor est, et mattis dolor tortor quis elit.</a> Nulla felis massa, auctor vel adipiscing malesuada, tempor a velit. Sed tincidunt congue turpis eget pharetra.</p>
    </div>

</article>
4

2 回答 2

0

您可以通过向也具有 .alignright 的 .wp-caption 类添加 clear:left 来强制它，反之亦然。拥有您网站的 URL 将有助于您获得更具体的内容。

更新：您使用的是响应式布局，因此事情会根据浏览器而有所不同，但基本上看起来您对 single.php 上的第一个图像浮动的方式不满意，因此它将第二段削减为一个单词在第一行。但是，您对此无能为力，除非稍后将帖子写成 PITA。您的主页和 single.php 的显示略有不同，主页上的第一段比 single.php 长得多 - 大约 1-2 行 - 这就是为什么浮动到右侧的第一个图像表现不同的原因。至于无序列表，不幸的是，这是 WordPress 图像对齐的典型痛苦，一直看到它。处理它的最简单方法是尝试构建您的帖子，以使图像不会出现在列表旁边，或者，除非，

于 2012-12-27T19:02:15.627 回答
0

我发现的唯一解决方案如下：

article .entry ul {
    margin: 10px 0 10px 2px;
}

article .entry ul > li {
    margin: 5px 0;
    list-style-position: inside;
}

/* Images */

.alignright {
    display: inline;
    float: right;
    margin: 0 0 10px 20px;
}

.alignleft {
    display: inline;
    float: left;
    margin: 0 20px 10px 0;
}

.aligncenter {
    display: block;
    margin: 0 auto 1px auto;
    clear: both;
}

.wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 4px;
}

.wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
}

.wp-caption p.wp-caption-text {
    font-size: 12px;
    font-style: italic;
    line-height: 20px;
    padding: 0 5px;
    margin: 5px 0;
}

结果是：

修复结果

这可能不是最好的技术，但结果可能被认为是可以接受的（我认为）。

于 2012-12-29T16:01:36.527 回答