下面有两个网页。除了段落的长度（p标签）之外，一切都是一样的。但这两个网页看起来略有不同（就对比而言）。
换句话说，与包含更多段落的页面相比，页面较少的页面与左侧对齐。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
body{
margin:0 auto;
font-family:Helvetica Neue, Helvetice-Neue, Helvetica;
font-weight:200;
font-size:16px;
color:#2f2f2f;
}
.breakv{
float:left;
width:2px;
height:200px;
margin-top:78px;
margin-right:3px;
padding-top:18px;
padding-left:2px;
background:url(images/breakv.png) repeat-y;
}
strong{
color:#0074B4;
}
.breakh{
width:370px;
margin:0 auto;
padding-top:8px;
height:4px;
background:url(images/breakh.png) bottom repeat-x;
}
.navbar{
background-color:#57b7df;
font-family:Helvetica Neue, Helvetice-Neue;
font-weight:100;
line-height:21px;
border-color:transparent;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 50%;
margin: auto;
}
</style>
</head>
<body class="container">
<div class="container-fluid">
<img src="./images/header.png" class="img-responsive">
</div>
<div style="background-color:#57b7df" class="container-fluid">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href=".\index.html">Home</a></li>
<li><a href=".\photos.html">Photos</a></li>
<li class="active"><a href=".\prices.html">Prices</a></li>
<li><a href=".\instructions.html">Instructions</a></li>
<li><a href=".\testimonials.html">Testimonials</a></li>
<li><a href=".\contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid hidden-sm hidden-xs">
<img src="images/prices1.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
<img src="images/prices3.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
<img src="images/test3.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
</div>
<div id="myCarousel" class="carousel slide hidden-md hidden-lg hidden-xl" data-ride="carousel">
<!- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/prices1.png" >
</div>
<div class="item">
<img src="images/prices2.png">
</div>
<div class="item">
<img src="images/test3.png">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-md-5 col-xs-12 col-sm-12">
<h3>Private or Party</h3>
<p>Do you need a quick tan just for yourself or are you thinking of making it a fun event for you and your friends? <strong>A Kiss of Bronze Airbrush Tanning</strong> offers both personal tanning sessions and tanning parties!</p>
<p>Never heard of a tanning party? You've heard of lingerie parties, cosmetics parties, jewelry parties, even tupperware parties!!! Well now it's time to introduce <strong>TANNING PARTIES</strong>!</p>
<p>You and a minimum of five (5), max of ten (10), friends get together, and you all get tanned in one session. The hostess of six (6) or more people gets to <strong>tan for free</strong>!</p>
</div>
</body>
</html>
有更多文字：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
body{
margin:0 auto;
font-family:Helvetica Neue, Helvetice-Neue, Helvetica;
font-weight:200;
font-size:16px;
color:#2f2f2f;
}
.breakv{
float:left;
width:2px;
height:200px;
margin-top:78px;
margin-right:3px;
padding-top:18px;
padding-left:2px;
background:url(images/breakv.png) repeat-y;
}
strong{
color:#0074B4;
}
.breakh{
width:370px;
margin:0 auto;
padding-top:8px;
height:4px;
background:url(images/breakh.png) bottom repeat-x;
}
.navbar{
background-color:#57b7df;
font-family:Helvetica Neue, Helvetice-Neue;
font-weight:100;
line-height:21px;
border-color:transparent;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 50%;
margin: auto;
}
</style>
</head>
<body class="container">
<div class="container-fluid">
<img src="./images/header.png" class="img-responsive">
</div>
<div style="background-color:#57b7df" class="container-fluid">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href=".\index.html">Home</a></li>
<li><a href=".\photos.html">Photos</a></li>
<li class="active"><a href=".\prices.html">Prices</a></li>
<li><a href=".\instructions.html">Instructions</a></li>
<li><a href=".\testimonials.html">Testimonials</a></li>
<li><a href=".\contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid hidden-sm hidden-xs">
<img src="images/prices1.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
<img src="images/prices3.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
<img src="images/test3.png" class="img-responsive col-md-4 col-lg-4 col-xl-4">
</div>
<div id="myCarousel" class="carousel slide hidden-md hidden-lg hidden-xl" data-ride="carousel">
<!- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/prices1.png" >
</div>
<div class="item">
<img src="images/prices2.png">
</div>
<div class="item">
<img src="images/test3.png">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-md-5 col-xs-12 col-sm-12">
<h3>Private or Party</h3>
<p>Do you need a quick tan just for yourself or are you thinking of making it a fun event for you and your friends? <strong>A Kiss of Bronze Airbrush Tanning</strong> offers both personal tanning sessions and tanning parties!</p>
<p>Never heard of a tanning party? You've heard of lingerie parties, cosmetics parties, jewelry parties, even tupperware parties!!! Well now it's time to introduce <strong>TANNING PARTIES</strong>!</p>
<p>You and a minimum of five (5), max of ten (10), friends get together, and you all get tanned in one session. The hostess of six (6) or more people gets to <strong>tan for free</strong>!</p>
<p><strong>Tanning parties</strong> are great for Girls Night In, Up-coming Special Occasions, Swimsuit Competitions, Pre-Holiday Tan Parties or if you just want to have some girlfriends over and treat yourselves!</p>
<p>Wear dark, loose fitting clothes (ie. tracksuit, sweats). You may want to bring a bathrobe or swim suit cover-up to wear after your <strong>airbrush tan</strong> while you're drying.</p>
<p>To all those ladies who are uncomfortable about your figure, don't worry! Discuss your requirements beforehand whether you want to wear a bikini, swimsuit or shorts. We deal with all shapes, sizes and ages so please do not feel nervous or embarrassed.</p>
<div style="float:right; padding-left:8px;"><img src="images/stickerbride.png" class="img-responsive"/></div>
<p>All brides want to look radiant on the biggest and happiest day of their lives, and nothing will give you that beautiful bride glow like a sun kissed tan. Have a trial tan a few weeks before the big day so you can judge for yourself which day after your spray tan application you feel that your tan is at its best. This gives you enough planning time to book again before the big day!</p>
<p>**Call for special pricing.</p>
</div>
</body>
</html>
如何在页面组件的对齐方面使页面看起来完全相同？我应该如何做？ 我在不同的浏览器MSEdge上尝试了相同的页面。奇怪的是，每个页面在对齐方面看起来都一样。
答案 0 :(得分：0)
如果您使用的是Bootstrap，则会经常应用:first-child和:last-child个伪元素。那将是第一个看的地方。
你能不能把你的代码示例扔进一个jsfiddle来演示你遇到的问题？
答案 1 :(得分：0)
唯一的区别似乎是滚动条。因此，您唯一需要做的就是将function imageCounter() {
var ballCount = 0;
var truckCount = 0;
$('img[src*=ball]').each(function () {
if ($(this).prop("checked")) {
ballCount += 1;
}
});
$('#radioButtons').append("There are " + ballCount + " ball images.");
$('img[src*=truck]').each(function () {
if ($(this).prop("checked")) {
truckCount += 1;
}
});
$('#radioButtons').append("There are " + truckCount + " truck images.");
}
放入您的body CSS选择器中。
---------- Buzinas
是正确的答案。 Buzinas，你节省我的一天!!!很多thx！