0
ブログの投稿が動的に読み込まれるページがあります。同じクラスでCssの配置が異なって動作する
問題は、私がdiv -sを使用しても、同じブログの投稿ごとに同じclassを使用しています。添付のスクリーンショットにあるように、動作は同じではありません。
ReadMoreボタンの位置は、2行目のみで、最初の行はOKではなく、テキストも同じです。
私が使用しているコードを追加しました。何を確認するかアドバイスできますか？ .loop-entry-excerpt pは、 はそう一番上の行の3番目のサムネイル（中）それだけですあなたのための隠された）：
.home .home_thirdrow .loop-entry {
max-width: 350px;
height: 100px;
margin: 10px 10px 30px 10px;
padding: 0px;
background: #f8f8f8;
border-radius: 3px;
font-family: "Oswald";
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
transition: all 0.9s ease;
}
.loop-entry {
max-width: 350px;
height: 450px;
margin: 10px 10px 30px 10px;
padding: 0px;
background: #fff;
border-radius: 3px;
font-family: "Oswald";
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
transition: all 0.9s ease;
}
.loop-entry:hover {
box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.5);
}
.loop-entry-thumbnail {
\t max-height: 175px;
\t overflow: hidden;
}
.loop-entry-case-study-thumbnail {
\t width: 100%;
max-height: 175px;
overflow: hidden;
margin: 0 auto;
}
.loop-entry-title {
\t max-height: 115px;
\t padding-bottom: 20px;
}
.loop-entry-excerpt p
{
margin-top: 120px;
color: rgb(119, 119, 119);
font-family: "Oswald";
font-size: 15.4px;
font-weight: 700;
line-height: 23.8px;
}
.page-id-61 .loop-entry-title {
\t font-weight:bold;
\t font-size: 30px;
\t position: absolute;
\t top: 200px;
}
.loop-entry-content {
padding: 30px 30px 0 30px;
/*color: #777;*/
box-sizing: border-box;
color: rgb(119, 119, 119);
\t font-family: "Oswald";
\t font-size: 15.4px;
\t font-weight: 700;
\t line-height: 23.8px;
\t margin-bottom: 10px;
\t margin-left: 0px;
\t margin-right: 0px;
}
.blog-posts img {
\t height: 175px;
\t width: 350px;
}
.home_readmore {
text-align: center;
font-size: 14px;
font-family: "TGLTCER","sans-serif";
padding: 10px 30px;
padding-bottom: 11px;
background-color: #F99D1C;
border: none;
float: left;
color: #fff;
transition: all 0.5s ease;
}
.button_Read_More{
\t margin-top: 28px;
\t line-height: 23.8px;
font-size: 14px;
font-weight: 700;
/*padding-bottom: 11px;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;\*/
}
.blog_readmore {
text-align: center;
font-size: 14px;
font-family: "TGLTCER","sans-serif";
padding: 10px 30px;
padding-bottom: 11px;
background-color: #F99D1C;
border: none;
float: right;
color: #fff;
transition: all 0.5s ease;
}<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Gargoyles Marketing Ad Agency Blog | Princeton Partners, Inc.</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
\t <link rel="stylesheet" href="http://localhost:8080/ppi/wp-content/themes/ppi_rework/css/bootstrap.min.css" type="text/css" media="screen">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link rel="stylesheet" href="http://localhost:8080/ppi/wp-content/themes/ppi_rework/royalslider/skins/default/rs-default.css">
<link rel="stylesheet" href="http://localhost:8080/ppi/wp-content/themes/ppi_rework/style.css" type="text/css" media="screen" />
<style> body {display:none; overflow-x:hidden;} </style>
\t \t <style type="text/css">
img.wp-smiley,
img.emoji {
\t display: inline !important;
\t border: none !important;
\t box-shadow: none !important;
\t height: 1em !important;
\t width: 1em !important;
\t margin: 0 .07em !important;
\t vertical-align: -0.1em !important;
\t background: none !important;
\t padding: 0 !important;
}
</style>
<style id='rs-plugin-settings-inline-css' type='text/css'>
#rs-demo-id {}
</style>
<script type='text/javascript' src='http://localhost:8080/ppi/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://localhost:8080/ppi/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='http://localhost:8080/ppi/wp-content/plugins/revslider/public/assets/js/jquery.themepunch.tools.min.js?ver=5.2.1'></script>
<script type='text/javascript' src='http://localhost:8080/ppi/wp-content/plugins/revslider/public/assets/js/jquery.themepunch.revolution.min.js?ver=5.2.1'></script>
<link rel='https://api.w.org/' href='http://localhost:8080/ppi/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8080/ppi/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost:8080/ppi/wp-includes/wlwmanifest.xml" />
<link rel='shortlink' href='http://localhost:8080/ppi/?p=61' />
<link rel="alternate" type="application/json+oembed" href="http://localhost:8080/ppi/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%3A8080%2Fppi%2Fblog%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://localhost:8080/ppi/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%3A8080%2Fppi%2Fblog%2F&format=xml" />
<style type="text/css">
a.pinit-button.custom {
}
a.pinit-button.custom span {
}
.pinit-hover {
opacity: 0.5 !important;
filter: alpha(opacity=50) !important;
}
</style>
\t \t <style type="text/css"> .comments-link { display: none; } </style><meta name="generator" content="Powered by Slider Revolution 5.2.1 - responsive, Mobile-Friendly Slider Plugin for WordPress with comfortable drag and drop interface." />
</head>
<body class="page-template-default page page-id-61">
\t
<div class="tip-top">
<div id="mobiledrop2" class="hidden-md hidden-lg">
</div><!-- end mobiledrop2 -->
<div id="header">
<div id="mobiledrop" class="row hidden-md hidden-lg">
<div class=row>
<div id="logo1" class="col-md-3 brand pull-left btn-lg ">
<a class="header-logo" href="http://localhost:8080/ppi/"></a>
</div>
<a id="call" type="button" class="col-md-3 btn btn-default btn-lg " href="tel:609-806-1009">
<span class="glyphicon glyphicon-phone"></span> Call
</a>
<a id="directions" type="button" class="col-md-3 btn btn-default btn-lg " href="https://maps.google.com/maps?q=205+Rockingham+Row+Princeton,+NJ+08540&ie=UTF8&hl=en&hq=&hnear=Rockingham+Row,+Plainsboro+Township,+Middlesex,+New+Jersey+08540&t=m&ll=40.354851,-74.612617&spn=0.019622,0.025749&z=14&iwloc=A&source=embed">
<span class="glyphicon glyphicon-map-marker"></span> Directions
</a>
<button id="menu" type="button" class="col-md-3 btn btn-default btn-lg">
<span class="glyphicon glyphicon glyphicon-th-list"></span>
</button>
</div>
</div>
<div class="row content mobile-container new-header" style="border:none !important; margin-right:-15px;">
<div class="container">
<div id="logo1" class="col-md-3 brand pull-left">
<a class="col-md-12 col-lg-12 col-xl-12 header-logo" href="http://localhost:8080/ppi/"></a>
</div>
<div class="col-md-9 pull-right">
<ul class="nav list-inline visible-lg visible-md clearfix pull-right nav-pills main-menu">
<li><a href="http://localhost:8080/ppi/#panel-two">Clients</a></li>
<li><a href="http://localhost:8080/ppi/#panel-three">Case studies</a></li>
<li><a href="http://localhost:8080/ppi/#panel-for">Capabilities</a></li>
<li><a href="http://localhost:8080/ppi/#panel-nine">Team</a></li>
<li><a href="http://localhost:8080/ppi/#footer-container-1">Contact</a></li>
</ul>
</div><!-- end col-md-8 -->
</div><!-- end container -->
</div><!-- end row -->
</div><!-- end header -->
</div>
<style type="text/css">
.page .content h1 {
font-family: 'TGLTCER';
color: #000;
text-align: center;
}
@media all and (max-width:768px) {
#blogindex { padding-left:10%; }
#gargoyle { padding-right:175px; }
}
@media all and (min-width:376px) {
#blogindex { padding-left:15x; }
#gargoyle { padding-right:60px; }
}
@media all and (max-width:376px) {
#blogindex { padding-left:0px; padding-right:25px; }
#gargoyle { padding-left:10px; padding-right:0px; }
/*.connect-heading { font-size: 60px; line-height: 60px; margin: 25px 0 25px 0; }*/
}
@media all and (min-width:1024px) {
#blogindex { padding-left:15px; }
#gargoyle { padding-right:15px; }
}
</style>
<!-- Banner -->
<div class="row">
<div class="ppi-background-wrapper">
<figure class="ppi-floating-background">
<img title="blog header" alt="blog header image" src="http://localhost:8080/ppi/wp-content/themes/ppi_rework/images/connect.jpg"/>
</figure>
</div>
</div>
<div class="row content" style="padding-top: 0px;">
<div class="container">
<div id="blogindex" class="row col-md-12">
<div id="gargoyle">
<h3 class="connect-heading">The Gargoyle Blog</h3>
</div>
<br /><br />
<div id="top_content" style="position: relative;" data-masonry='{ "itemSelector": ".loop-entry" }'>
<div class="col-md-4 col-sm-12 loop-entry">
<div class="contact_con blog-posts">
<div class="loop-entry-thumbnail" style="min-height: 150px;">
<a href="http://localhost:8080/ppi/intern-spotlight-marlo-colabella/" title="Intern Spotlight: Marlo Colabella">
<img src="http://localhost:8080/ppi/wp-content/uploads/Spotlight-Banner-1-1.png" alt="Intern Spotlight: Marlo Colabella" title="Intern Spotlight: Marlo Colabella" />
</a>
</div>
<div class="loop-entry-content clr" style="position: absolute;">
<header>
<h2 class="loop-entry-title entry-title">
<a href="http://localhost:8080/ppi/intern-spotlight-marlo-colabella/">Intern Spotlight: Marlo Colabella...</a>
</h2>
</header>
<div class="loop-entry-excerpt entry clr">
<p>
We recently chatted with Marlo, our Fall 2016 Social and Digital Me...</p>
<div class="button_Read_More">
<a href="http://localhost:8080/ppi/intern-spotlight-marlo-colabella/"><span class="blog_readmore">Read more</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 loop-entry">
<div class="contact_con blog-posts">
<div class="loop-entry-thumbnail" style="min-height: 150px;">
<a href="http://localhost:8080/ppi/a-losing-strategy/" title="Incivility: A Pricey Problem in the Workplace">
<img src="http://localhost:8080/ppi/wp-content/uploads/insight-tuesday-3-small-1.jpg" alt="Incivility: A Pricey Problem in the Workplace" title="Incivility: A Pricey Problem in the Workplace" />
</a>
</div>
<div class="loop-entry-content clr" style="position: absolute;">
<header>
<h2 class="loop-entry-title entry-title">
<a href="http://localhost:8080/ppi/a-losing-strategy/">Incivility: A Pricey Problem in the...</a>
</h2>
</header>
<div class="loop-entry-excerpt entry clr">
<p><h3><strong>Can a rude employee attitude cost you money at the bottom line?...</p>
<div class="button_Read_More">
<a href="http://localhost:8080/ppi/a-losing-strategy/"><span class="blog_readmore">Read more</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 loop-entry">
<div class="contact_con blog-posts">
<div class="loop-entry-thumbnail" style="min-height: 150px;">
<a href="http://localhost:8080/ppi/new-jersey-higher-education/" title="New Jersey Higher Education: A Case Study in Avoiding the Legacy Box">
<img src="http://localhost:8080/ppi/wp-content/uploads/Insight-Image-1-1-1.jpg" alt="New Jersey Higher Education: A Case Study in Avoiding the Legacy Box" title="New Jersey Higher Education: A Case Study in Avoiding the Legacy Box" />
</a>
</div>
<div class="loop-entry-content clr" style="position: absolute;">
<header>
<h2 class="loop-entry-title entry-title">
<a href="http://localhost:8080/ppi/new-jersey-higher-education/">New Jersey Higher Education: A Case...</a>
</h2>
</header>
<div class="loop-entry-excerpt entry clr">
<p>The Legacy Box is a place where institutions die a slow, painful, unexamine...</p>
<div class="button_Read_More">
<a href="http://localhost:8080/ppi/new-jersey-higher-education/"><span class="blog_readmore">Read more</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 loop-entry">
<div class="contact_con blog-posts">
<div class="loop-entry-thumbnail" style="min-height: 150px;">
<a href="http://localhost:8080/ppi/mcdonalds-branding/" title="McDonald’s: Is the Brand Missing the Millennial Mark?">
<img src="http://localhost:8080/ppi/wp-content/uploads/Susan_Insight_BannerImage-1-1.jpg" alt="McDonald’s: Is the Brand Missing the Millennial Mark?" title="McDonald’s: Is the Brand Missing the Millennial Mark?" />
</a>
</div>
<div class="loop-entry-content clr" style="position: absolute;">
<header>
<h2 class="loop-entry-title entry-title">
<a href="http://localhost:8080/ppi/mcdonalds-branding/">McDonald’s: Is the Brand Miss...</a>
</h2>
</header>
<div class="loop-entry-excerpt entry clr">
<p>It’s been a struggle lately for one of the most iconic brands in the worl...</p>
<div class="button_Read_More">
<a href="http://localhost:8080/ppi/mcdonalds-branding/"><span class="blog_readmore">Read more</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 loop-entry">
<div class="contact_con blog-posts">
<div class="loop-entry-thumbnail" style="min-height: 150px;">
<a href="http://localhost:8080/ppi/profits-people-not-winning-strategy-wells-fargo/" title="Profits Before People: Not a Winning Strategy For Wells Fargo">
<img src="http://localhost:8080/ppi/wp-content/uploads/INsight-Tuesday-image-1-1.jpg" alt="Profits Before People: Not a Winning Strategy For Wells Fargo" title="Profits Before People: Not a Winning Strategy For Wells Fargo" />
</a>
</div>
<div class="loop-entry-content clr" style="position: absolute;">
<header>
<h2 class="loop-entry-title entry-title">
<a href="http://localhost:8080/ppi/profits-people-not-winning-strategy-wells-fargo/">Profits Before People: Not a Winnin...</a>
</h2>
</header>
<div class="loop-entry-excerpt entry clr">
<p>In my career as a marketer, I have had the opportunity to work with over a ...</p>
<div class="button_Read_More">
<a href="http://localhost:8080/ppi/profits-people-not-winning-strategy-wells-fargo/"><span class="blog_readmore">Read more</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 loop-entry">
<div class="contact_con blog-posts">
<div class="loop-entry-thumbnail" style="min-height: 150px;">
<a href="http://localhost:8080/ppi/power-passion-marketing/" title="The Power of Passion in Marketing">
<img src="http://localhost:8080/ppi/wp-content/uploads/Banner_Photo_09272016-1-1.jpg" alt="The Power of Passion in Marketing" title="The Power of Passion in Marketing" />
</a>
</div>
<div class="loop-entry-content clr" style="position: absolute;">
<header>
<h2 class="loop-entry-title entry-title">
<a href="http://localhost:8080/ppi/power-passion-marketing/">The Power of Passion in Marketing...</a>
</h2>
</header>
<div class="loop-entry-excerpt entry clr">
<p>There is much that can be said about the 2016 Presidential election. One se...</p>
<div class="button_Read_More">
<a href="http://localhost:8080/ppi/power-passion-marketing/"><span class="blog_readmore">Read more</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="target-box"></div>
<br /><br />
<button data-post-type="post" data-category="2" id="load-more" type="button" class="home_readmore">
<i class="fa fa-rss-square" aria-hidden="true"></i> Load More
</button>
</div>
<div id="original-content"></div>
</div>
</div>
<!-- GOOGLE ANALYTICS !-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
\t (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
\t m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
\t })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
\t ga('create', 'UA-17693062-1', 'auto');
\t ga('require', 'displayfeatures');
\t ga('send', 'pageview');
\t \t // INIT MAJOR KEYS
\t \t (function($){
\t \t \t $("body").fadeIn(1500);
\t \t \t $('.box').each(function() {
\t \t \t var $this = $(this);
\t \t \t $this.popover({
\t \t \t \t trigger: 'hover',
\t \t \t \t placement: 'bottom',
\t \t \t \t html: true,
\t \t \t \t content: $this.find('#popover').html()
\t \t \t });
\t \t \t });
\t \t \t $('[data-toggle="tooltip"]').tooltip();
$(window).scroll(function() {
if ($(this).scrollTop()) {
$('.scroll-to-top:hidden').stop(true, true).fadeIn();
} else {
$('.scroll-to-top').stop(true, true).fadeOut();
}
});
$('.scroll-to-top').on('click', function(){
$('html, body').animate({
scrollTop: 0
}, 2000);
});
\t \t \t })(jQuery);
\t </script>
</body>
</html>
（=あなたのページをチェックせずにそれらのすべてを追加することはできませんあなたは（つまり、ブラウザで「ソースを表示」を介して見ることができる結果のHTMLを投稿してくださいでした）、PHPソースではないのですか？PHP対応のWebサーバーを実行する必要がない場合、問題を再現して判別するのは簡単でしょう:) –
質問を更新しました。結果のHTMLをスニペットに追加しました – Orsi