html - 对齐适用于 fiddle ，但运行时不适用于实际浏览器

Question

当我在 jsfiddle 中运行它时，它工作正常，但是当我在任何浏览器上测试运行时，对齐是否搞砸了？图片应该在左侧对齐，一张在另一张上面。

<main>
    <h2>Shop at Pacific Trails</h2>

    <h3>Contact Us</h3>

    <p>Required information is marked with an asterisk(*).</p>

    <img class="leftfloat" src="trailguide.jpg" alt="picture of trail 
    guide"/>

    <h3>Pacific Trails Hiking Guide</h3>

    <p>Guided hikes to the best trails around Pacific Trails Resort.  
    Each hike includes a detailed route, distance, elevation change, and 
    estimated time. 187 pages. Softcover. $19.95.</p>

    <form method="post"
    action="http://www.webdevfoundations.net/scripts/cart.asp">
    <input type="hidden" name="descl" id="descl" value="Hiking Guide">
    <input type="hidden" name="costl" id="costl" value="19.95">
    <input type="submit" value="Add to Cart">
    </form>

    <br class="clear">


    <img class="leftfloat" src="yurtyoga.jpg" alt="picture of yoga 
    book"/>

    <h3>Yurt Yoga</h3>

    <p>Enjoy the restorative poses of yurt yoga in the comfort of your 
    own home.  Each post is illustrated with several photographs, an 
    explanation, and a description of the restorative benefits. 206 
    pages. Softcover. $24.95.</p>

    <form method="post"
    action="http://www.webdevfoundations.net/scripts/cart.asp">
    <input type="hidden" name="desc2" id="desc2" value="Yurt Yoga">
    <input type="hidden" name="cost2" id="cost2" value="24.95">
    <input type="submit" value="Add to Cart">
    </form>

    <br class="clear">

https://jsfiddle.net/5eewf859/

Answer 1

问题出在 css 中的 float:clear; 行。这应该是 clear:both;。

fiddle 的问题是没有要加载的图像，因此不会显示对齐问题。但是如果您将实际图像放在 fiddle 中，问题也会在那里显示。 Updated fiddle .

解决方案:将float:clear替换为clear:both。

body {
  /*background-image: url(background.jpg);*/
  background-color: #FFFFFF;
  color: #666666;
  font: Verdana, Arial, sans-serif;
}

header {
  background-color: #000033;
  color: #FFFFFF;
  font: Georgia, serif;
}

h1 {
  background-image: url(sunset.jpg);
  background-repeat: no-repeat;
  background-position: right;
  padding-left: 20px;
  line-height: 200%;
  height: 72px;
  margin-bottom: 0;
}

nav {
  padding: 5px;
  background-color: #90C7E3;
  font-weight: bold;
}

nav a {
  text-decoration: none;
}

h2 {
  color: #3399CC;
  font: Georgia, serif;
}

dt {
  color: #000033;
  font-weight: bold;
}

.resort {
  color: #000033;
  font-size: 1.2em;
}

footer {
  padding: 10px;
  font-size: .70em;
  font-style: italic;
  text-align: center;
}

#wrapper {
  box-shadow: 5px 5px 5px 5px;
  max-width: 1024px;
  min-width: 700px;
  background-color: #FFFFFF;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}

h3 {
  color: #000033;
}

main {
  padding: 0px 20px 0px 20px;
  display: block;
}

.homehero {
  background-image: url(coast.jpg);
  height: 300px;
  background-size: 100% 100%;
}

.yurthero {
  background-image: url(yurt.jpg);
  height: 300px;
  background-size: 100% 100%;
}

.trailhero {
  background-image: url(trail.jpg);
  background-size: 100% 100%;
  height: 300px;
}

table {
  width: 90%;
  margin: auto;
  border: 1px solid #3399cc;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #3399cc;
  padding: 5px;
}

td {
  text-align: center;
}

.text {
  text-align: left;
}

tr:nth-of-type(even) {
  background-color: #F5FAFC;
}

label {
  float: left;
  display: block;
  width: 8em;
  padding-right: 1em;
}

input,
textarea {
  display: block;
  margin-bottom: 1em;
}

#mySubmit {
  margin-left: 10em;
}

video,
embed {
  float: right;
  margin: 2em;
}

.leftfloat {
  float: left;
  margin: 1em;
}

.clear {
  clear: both;
}

<header>
  <h1>Pacific Trails Resort</h1>
</header>

<nav>
  <a href="index.html">Home</a> &nbsp;
  <a href="yurts.html">Yurts</a> &nbsp;
  <a href="activities.html">Activities</a> &nbsp;
  <a href="reservations.html">Reservations</a>
  <a href="shop.html">Shop</a>
</nav>



<main>
  <h2>Shop at Pacific Trails</h2>
  <h3>Contact Us</h3>
  <p>Required information is marked with an asterisk(*).</p>

  <img class="leftfloat" src="https://placehold.it/250x251" alt="picture of trail guide" />

  <h3>Pacific Trails Hiking Guide</h3>
  <p>Guided hikes to the best trails around Pacific Trails Resort. Each hike includes a detailed route, distance, elevation change, and estimated time. 187 pages. Softcover. $19.95.</p>
  <form method="post" action="http://www.webdevfoundations.net/scripts/cart.asp">
    <input type="hidden" name="descl" id="descl" value="Hiking Guide">
    <input type="hidden" name="costl" id="costl" value="19.95">
    <input type="submit" value="Add to Cart">
  </form>

  <br class="clear">


  <img class="leftfloat" src="https://placehold.it/250x252" alt="picture of yoga book" />

  <h3>Yurt Yoga</h3>
  <p>Enjoy the restorative poses of yurt yoga in the comfort of your own home. Each post is illustrated with several photographs, an explanation, and a description of the restorative benefits. 206 pages. Softcover. $24.95.</p>
  <form method="post" action="http://www.webdevfoundations.net/scripts/cart.asp">
    <input type="hidden" name="desc2" id="desc2" value="Yurt Yoga">
    <input type="hidden" name="cost2" id="cost2" value="24.95">
    <input type="submit" value="Add to Cart">
  </form>

  <br class="clear">



</main>



<footer>
  Copyright &copy; 2016 Pacific Trails Resort <br>
  <a href="christian@gmail.com">christian@gmail.com</a>
</footer>