对于同一个类，Css定位的工作方式不同
我有一个页面，其中一些博客帖子是动态加载的。
问题在于虽然我使用class -s并且我对每篇博文使用相同的ReadMore，但正如您在附带的屏幕截图中看到的那样，行为并不相同。
.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 {
max-height: 175px;
overflow: hidden;
}
.loop-entry-case-study-thumbnail {
width: 100%;
max-height: 175px;
overflow: hidden;
margin: 0 auto;
}
.loop-entry-title {
max-height: 115px;
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 {
font-weight:bold;
font-size: 30px;
position: absolute;
top: 200px;
}
.loop-entry-content {
padding: 30px 30px 0 30px;
/*color: #777;*/
box-sizing: border-box;
color: rgb(119, 119, 119);
font-family: "Oswald";
font-size: 15.4px;
font-weight: 700;
line-height: 23.8px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
}
.blog-posts img {
height: 175px;
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{
margin-top: 28px;
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'>
<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>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
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>
<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">
<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(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-17693062-1', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
// INIT MAJOR KEYS
(function($){
$("body").fadeIn(1500);
$('.box').each(function() {
var $this = $(this);
$this.popover({
trigger: 'hover',
placement: 'bottom',
html: true,
content: $this.find('#popover').html()
});
});
$('[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);
});
})(jQuery);
</script>
</body>
</html><style type="text/css">
h1{
width:100%;
display: block;
float: left;
margin-bottom: 25px;
margin-top: 25px;
}
</style>
<h1>this is test</h1>
1 个答案:
答案 0 :(得分：0)
1）您的.loop-entry-excerpt p没有最大高度（和溢出：隐藏），
所以在第3个缩略图中（在顶行）它太长了，按钮到底部
2）你有这个代码：
.page-id-61 .loop-entry-title {
font-weight:bold;
font-size: 30px;
position: absolute;
top: 200px;
}
由于位置绝对和img abscence，您的.loop-entry-excerpt p和按钮会移到顶部。
这不是问题的完整列表，但我无法在不检查您的网页的情况下添加所有问题=（
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？