我如何保持填充以清除浮动

Question

我在 div 中有图像，它们从左到右、从上到下浮动，每行 2 个。我不想要 2 列布局，因为我希望在添加、减去或替换某些图像时保持图像的流动。有时，如果右侧的图像小于左侧的图像，我不希望下一个图像漂浮在右侧图像的下方，而是撞到下一行。

如果我向该图像添加 "clear: left"，填充将不起作用 - 我猜是因为它已被清除？我怎样才能保持这些图像的填充，使它们不会紧贴 div 的边缘？

从左到右、从上到下阅读的第 3 和第 5 张图片中的问题很明显。

$(document).ready(function(){
  $('.img-zoom').hover(function() {
    $(this).addClass('transition');
  }, function() {
    $(this).removeClass('transition');
  });
});

#main {
  margin-top: 50px;
}
#article {
  width: 450px;
  float: left;
  margin-left: 75px;
  padding-right: 40px;
}
#article p {
  text-indent: 50px;
}
#gallery {
  width: 360px;  
  height: 3600px;
  float: left;
  background-color: #F8F1D4;
}
div.imageBlockFull {
  padding: 10px 0px 10px 20px;
  width: 300px;
  margin: 0 auto;
  float: left;
}
IMG.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto 
}
div.imageBlockLeft {
  padding: 10px 0px 10px 20px;
  width: 150px;
  float: left;
}    
div.imageBlockRight {
  padding: 10px 20px 10px 0px;   
  width: 150px;
  float: right;
}
div.imageBlockFloatLeftClearLeft {
  padding: 10px 20px 10px 0px;   
  width: 150px;
  float: left;
  clear: left;
}
div.imageBlockLeft p:nth-child(2n+2) {
  font-family: "jaf-bernina-sans-narrow";
  font-size: .8em;
  line-height: 18px;
  border-bottom: 1px solid black;
  background-color: #F8F1D4;
}
div.imageBlockRight p:nth-child(2n+2) {
  font-family: "jaf-bernina-sans-narrow";
  font-size: .8em;
  line-height: 18px;
  border-bottom: 1px solid black;
  background-color: #F8F1D4;
}
.captionFull {
  float: left;
  margin: 0px 20px;
  padding: 0px 20px;   
  font-family: "jaf-bernina-sans-narrow";
  font-size: .8em;
  line-height: 18px;
  border-bottom: 1px solid black;
  background-color: #F8F1D4;
}
.captionFull  p {
  padding: 0px;
  margin: 0px;
}
p.centerHover {
  font-family: "jaf-bernina-sans-narrow";
  font-size: .9em;
  line-height: 20px;
  padding: 0 1em 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  width: 16em;
  text-align: center;
}
h1 {
  font-size: 1.2em;
  font-variant: small-caps;
  text-align: center;
  padding-top: 9px;
  padding-bottom: 11px;
  border-top: 2px solid #E3A300 !important;
  border-bottom: 2px solid #E3A300 !important;
}
/*THIS AFFECTS THE SPEED OF THE ZOOM*/
.img-zoom {
  width: 150px;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
}
/*THIS AFFECTS THE SIZE OF THE ZOOM*/
.transition {
  -webkit-transform: scale(4.5); 
  -moz-transform: scale(4.5);
  -o-transform: scale(4.5);
  transform: scale(4.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div id="article">
    <p>I am descended from two unrelated Lewis lines - on my mother's and father's side.  This page is devoted to my paternal Lewis line.</p>
    <p>My earliest known Lewis ancestor in this line is Alexander, born about 1750 and died sometime between 12 Apr 1819 and 10 Sep 1820. He was in Christian County, Kentucky, by 15 May 1798, at a session of the County Court. He received warrant #725 to survey 200 acres of “second rate land” on the west fork of Pond River on 19 Oct 1798. A survey was conducted on 12 Feb 1799.  Alexander assigned the survey to Benjamin P Campbell on 1 May 1805 and Campbell assigned it to Smith Lofland on 13 Nov 1806.  On 17 Dec 1805, Alexander's son, Robert, assigned him 200 acres on Pond River.  Alexander disappears from records until 29 Apr 1818, when Robert assigned him another 200 acres on Pond River. In an indenture (deed) dated 10 Sep 1820, Christian County Commissioner James W Callaway sells the "the heirs of Alexander Lewis&#91's&#93" interest in 200 acres issuing from his warrant #725 to Smith Lofland.  The indenture states a follows:</p>
  </div>
  <div id="gallery">
    <h1>Image Gallery</h1>
    <p class="centerHover">Hover over images to enlarge.</p>
    <div class="imageBlockLeft">
      <p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_robert_e.jpg class="img-thumbnail" alt="lewis land warrant" width="148" height="195"></p>
      <p>My great-grandfather, Robert Ewing Lewis, ca. 1908.</p>
    </div>
    <div class="imageBlockRight">
      <p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_gene.jpg class="img-thumbnail" alt="lewis land warrant" width="148" height="184"></p>
      <p>My grandfather, Eugene Barton Lewis, ca. 1926.</p>
    </div>
    <div class="imageBlockFloatLeftClearLeft">
      <p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_jim.jpg class="img-thumbnail" alt="lewis land warrant" width="149" height="225"></p>
      <p>My father, James Edward Lewis, ca. 1959.</p>
    </div>
    <div class="imageBlockRight">
      <p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_4_generations.jpg class="img-thumbnail" alt="lewis land warrant" width="143" height="104"></p>
      <p>Four generations:  Thompson Price Lewis, Robert Ewing Lewis holding James Edward Lewis, Eugene Barton Lewis, Jan 1939.</p>
    </div>
    <div class="imageBlockFloatLeftClearLeft">
      <p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_alex_17981019_ky_christian_war_1197.jpg class="img-thumbnail" alt="lewis land warrant" width="140" height="143"></p>
      <p>Fig. 1.  Alexander Lewis's warrant #3663 to survey 200 acres of "second rate land" on the west fork of Pond River, dated 19 Oct 1798.</p>
    </div>
    <div class="imageBlockRight">
      <p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_alex_17990212_ky_christian_sur_1197.jpg class="img-thumbnail" alt="lewis land survey" width="147" height="256"></p> 
      <p>Alexander Lewis's survey #1197 dated 12 Feb 1799 for warrant #3663.</p>
    </div>
    <div class="imageBlockLeft">
      <p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_alex_18050501_ky_christian_trn_1197.jpg class="img-thumbnail" alt="lewis land transfer" width="146" height="256"></p>
      <p>Alexander Lewis transferred his survey #1197 to Benjamin P Campbell on 1 May 1805.  Campbell transferred it to Smith Lofland on 13 Nov 1806.</p>
    </div>
    <div class="imageBlockRight">
      <p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_alex_&_robt_18020809_ky_christian_war_14849.jpg class="img-thumbnail" alt="lewis land warrant" width="143" height="118"></p>
      <p>Robert Lewis's warrant #725 for 200 acres dated 9 Aug 1802.</p>
    </div>
    <div class="imageBlockLeft">
      <p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_alex_&_robt_18051217_ky_christian_war_14849_obv.jpg class="img-thumbnail" alt="lewis land warrant" width="143" height="121"></p>
      <p>Robert Lewis transferred warrant #725 to his father on 17 Dec 1805.</p>
    </div>
    <div class="imageBlockLeft">
      <p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_smith_lofland_v_heirs_1.jpg class="img-thumbnail" alt="lewis land transfer" width="143" height="84"></p>
    </div>
    <div class="imageBlockRight">
      <p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_smith_lofland_v_heirs_2.jpg class="img-thumbnail" alt="lewis land transfer" width="142" height="184"></p>
    </div>
    <div class="captionFull">
      <p>Smith Lofland's suit against the heirs of Alexander Lewis.</p>
    </div>
  </div>
</div>
<!-- THIS IS THE END OF THE HTML -->

Answer 1

我已经将 div.imageBlockFloatLeftClearLeft 的填充从右改为左

div.imageBlockFloatLeftClearLeft {
  clear: left;
  float: left;
  padding: 10px 0 10px 20px;
  width: 150px;
}

这是您需要的吗，请检查以下代码段

$(document).ready(function() {
  $('.img-zoom').hover(function() {
    $(this).addClass('transition');

  }, function() {
    $(this).removeClass('transition');
  });
});

#main {
  margin-top: 50px;
}
#article {
  width: 450px;
  float: left;
  margin-left: 75px;
  padding-right: 40px;
}
#article p {
  text-indent: 50px;
}
#gallery {
  width: 360px;
  height: 3600px;
  float: left;
  background-color: #F8F1D4;
}
div.imageBlockFull {
  padding: 10px 0px 10px 20px;
  width: 300px;
  margin: 0 auto;
  float: left;
}
IMG.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto
}
div.imageBlockLeft {
  padding: 10px 0px 10px 20px;
  width: 150px;
  float: left;
}
div.imageBlockRight {
  padding: 10px 20px 10px 0px;
  width: 150px;
  float: right;
}
div.imageBlockFloatLeftClearLeft {
  padding: 10px 0px 10px 20px;
  width: 150px;
  float: left;
  clear: left;
}
div.imageBlockLeft p:nth-child(2n+2) {
  font-family: "jaf-bernina-sans-narrow";
  font-size: .8em;
  line-height: 18px;
  border-bottom: 1px solid black;
  background-color: #F8F1D4;
}
div.imageBlockRight p:nth-child(2n+2) {
  font-family: "jaf-bernina-sans-narrow";
  font-size: .8em;
  line-height: 18px;
  border-bottom: 1px solid black;
  background-color: #F8F1D4;
}
.captionFull {
  float: left;
  margin: 0px 20px;
  padding: 0px 20px;
  font-family: "jaf-bernina-sans-narrow";
  font-size: .8em;
  line-height: 18px;
  border-bottom: 1px solid black;
  background-color: #F8F1D4;
}
.captionFull p {
  padding: 0px;
  margin: 0px;
}
p.centerHover {
  font-family: "jaf-bernina-sans-narrow";
  font-size: .9em;
  line-height: 20px;
  padding: 0 1em 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  width: 16em;
  text-align: center;
}
h1 {
  font-size: 1.2em;
  font-variant: small-caps;
  text-align: center;
  padding-top: 9px;
  padding-bottom: 11px;
  border-top: 2px solid #E3A300 !important;
  border-bottom: 2px solid #E3A300 !important;
}
/*THIS AFFECTS THE SPEED OF THE ZOOM*/

.img-zoom {
  width: 150px;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
}
/*THIS AFFECTS THE SIZE OF THE ZOOM*/

.transition {
  -webkit-transform: scale(4.5);
  -moz-transform: scale(4.5);
  -o-transform: scale(4.5);
  transform: scale(4.5);
}

<div id="main">
  <div id="article">
    <p>I am descended from two unrelated Lewis lines - on my mother's and father's side. This page is devoted to my paternal Lewis line.</p>
    <p>My earliest known Lewis ancestor in this line is Alexander, born about 1750 and died sometime between 12 Apr 1819 and 10 Sep 1820. He was in Christian County, Kentucky, by 15 May 1798, at a session of the County Court. He received warrant #725 to
      survey 200 acres of “second rate land” on the west fork of Pond River on 19 Oct 1798. A survey was conducted on 12 Feb 1799. Alexander assigned the survey to Benjamin P Campbell on 1 May 1805 and Campbell assigned it to Smith Lofland on 13 Nov 1806.
      On 17 Dec 1805, Alexander's son, Robert, assigned him 200 acres on Pond River. Alexander disappears from records until 29 Apr 1818, when Robert assigned him another 200 acres on Pond River. In an indenture (deed) dated 10 Sep 1820, Christian County
      Commissioner James W Callaway sells the "the heirs of Alexander Lewis&#91's&#93" interest in 200 acres issuing from his warrant #725 to Smith Lofland. The indenture states a follows:</p>
  </div>
  <div id="gallery">
    <h1>Image Gallery</h1>
    <p class="centerHover">Hover over images to enlarge.</p>
    <div class="imageBlockLeft">
      <p>
        <img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_robert_e.jpg class="img-thumbnail" alt="lewis land warrant" width="148" height="195">
      </p>
      <p>My great-grandfather, Robert Ewing Lewis, ca. 1908.</p>
    </div>
    <div class="imageBlockRight">
      <p>
        <img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_gene.jpg class="img-thumbnail" alt="lewis land warrant" width="148" height="184">
      </p>
      <p>My grandfather, Eugene Barton Lewis, ca. 1926.</p>
    </div>
    <div class="imageBlockFloatLeftClearLeft">
      <p>
        <img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_jim.jpg class="img-thumbnail" alt="lewis land warrant" width="149" height="225">
      </p>
      <p>My father, James Edward Lewis, ca. 1959.</p>
    </div>
    <div class="imageBlockRight">
      <p>
        <img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_4_generations.jpg class="img-thumbnail" alt="lewis land warrant" width="143" height="104">
      </p>
      <p>Four generations: Thompson Price Lewis, Robert Ewing Lewis holding James Edward Lewis, Eugene Barton Lewis, Jan 1939.</p>
    </div>
    <div class="imageBlockFloatLeftClearLeft">
      <p>
        <img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_alex_17981019_ky_christian_war_1197.jpg class="img-thumbnail" alt="lewis land warrant" width="140" height="143">
      </p>
      <p>Fig. 1. Alexander Lewis's warrant #3663 to survey 200 acres of "second rate land" on the west fork of Pond River, dated 19 Oct 1798.</p>
    </div>
    <div class="imageBlockRight">
      <p>
        <img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_alex_17990212_ky_christian_sur_1197.jpg class="img-thumbnail" alt="lewis land survey" width="147" height="256">
      </p>
      <p>Alexander Lewis's survey #1197 dated 12 Feb 1799 for warrant #3663.</p>
    </div>
    <div class="imageBlockLeft">
      <p>
        <img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_alex_18050501_ky_christian_trn_1197.jpg class="img-thumbnail" alt="lewis land transfer" width="146" height="256">
      </p>
      <p>Alexander Lewis transferred his survey #1197 to Benjamin P Campbell on 1 May 1805. Campbell transferred it to Smith Lofland on 13 Nov 1806.</p>
    </div>
    <div class="imageBlockRight">
      <p>
        <img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_alex_&_robt_18020809_ky_christian_war_14849.jpg class="img-thumbnail" alt="lewis land warrant" width="143" height="118">
      </p>
      <p>Robert Lewis's warrant #725 for 200 acres dated 9 Aug 1802.</p>
    </div>
    <div class="imageBlockLeft">
      <p>
        <img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_alex_&_robt_18051217_ky_christian_war_14849_obv.jpg class="img-thumbnail" alt="lewis land warrant" width="143" height="121">
      </p>
      <p>Robert Lewis transferred warrant #725 to his father on 17 Dec 1805.</p>
    </div>
    <div class="imageBlockLeft">
      <p>
        <img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_smith_lofland_v_heirs_1.jpg class="img-thumbnail" alt="lewis land transfer" width="143" height="84">
      </p>
    </div>
    <div class="imageBlockRight">
      <p>
        <img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_smith_lofland_v_heirs_2.jpg class="img-thumbnail" alt="lewis land transfer" width="142" height="184">
      </p>
    </div>
    <div class="captionFull">
      <p>Smith Lofland's suit against the heirs of Alexander Lewis.</p>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 2

使用jQueryMasonry library and sleep well about this issue; The image positions will be handled dynamically; My Sample: https://jsfiddle.net/2g31njbe/

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div id="main">
  <div id="article">
    <p>I am descended from two unrelated Lewis lines - on my mother's and father's side.  This page is devoted to my paternal Lewis line.</p>
    <p>My earliest known Lewis ancestor in this line is Alexander, born about 1750 and died sometime between 12 Apr 1819 and 10 Sep 1820. He was in Christian County, Kentucky, by 15 May 1798, at a session of the County Court. He received warrant #725 to survey 200 acres of “second rate land” on the west fork of Pond River on 19 Oct 1798. A survey was conducted on 12 Feb 1799.  Alexander assigned the survey to Benjamin P Campbell on 1 May 1805 and Campbell assigned it to Smith Lofland on 13 Nov 1806.  On 17 Dec 1805, Alexander's son, Robert, assigned him 200 acres on Pond River.  Alexander disappears from records until 29 Apr 1818, when Robert assigned him another 200 acres on Pond River. In an indenture (deed) dated 10 Sep 1820, Christian County Commissioner James W Callaway sells the "the heirs of Alexander Lewis&#91's&#93" interest in 200 acres issuing from his warrant #725 to Smith Lofland.  The indenture states a follows:</p>
  </div>
  <div id="gallery">
    <h1>Image Gallery</h1>
    <p class="centerHover">Hover over images to enlarge.</p>
    <div class="grid-wrap">
        <div class="imageBlockLeft grid-item"><p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_robert_e.jpg class="img-thumbnail" alt="lewis land warrant" width="148" height="195"></p>
          <p>My great-grandfather, Robert Ewing Lewis, ca. 1908.</p></div>
        <div class="imageBlockRight grid-item"><p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_gene.jpg class="img-thumbnail" alt="lewis land warrant" width="148" height="184"></p>
          <p>My grandfather, Eugene Barton Lewis, ca. 1926.</p></div>
        <div class="imageBlockLeft grid-item"><p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_jim.jpg class="img-thumbnail" alt="lewis land warrant" width="149" height="225"></p>
          <p>My father, James Edward Lewis, ca. 1959.</p></div>
        <div class="imageBlockRight grid-item"><p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_4_generations.jpg class="img-thumbnail" alt="lewis land warrant" width="143" height="104"></p>
          <p>Four generations:  Thompson Price Lewis, Robert Ewing Lewis holding James Edward Lewis, Eugene Barton Lewis, Jan 1939.</p></div>
        <div class="imageBlockLeft grid-item"><p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_alex_17981019_ky_christian_war_1197.jpg class="img-thumbnail" alt="lewis land warrant" width="140" height="143"></p>
          <p>Fig. 1.  Alexander Lewis's warrant #3663 to survey 200 acres of "second rate land" on the west fork of Pond River, dated 19 Oct 1798.</p></div>
        <div class="imageBlockRight grid-item"><p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_alex_17990212_ky_christian_sur_1197.jpg class="img-thumbnail" alt="lewis land survey" width="147" height="256"></p> 
          <p>Alexander Lewis's survey #1197 dated 12 Feb 1799 for warrant #3663.</p></div>
        <div class="imageBlockLeft grid-item"><p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_alex_18050501_ky_christian_trn_1197.jpg class="img-thumbnail" alt="lewis land transfer" width="146" height="256"></p>
          <p>Alexander Lewis transferred his survey #1197 to Benjamin P Campbell on 1 May 1805.  Campbell transferred it to Smith Lofland on 13 Nov 1806.</p></div>
        <div class="imageBlockRight grid-item"><p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_alex_&_robt_18020809_ky_christian_war_14849.jpg class="img-thumbnail" alt="lewis land warrant" width="143" height="118"></p>
          <p>Robert Lewis's warrant #725 for 200 acres dated 9 Aug 1802.</p></div>
        <div class="imageBlockLeft grid-item"><p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_alex_&_robt_18051217_ky_christian_war_14849_obv.jpg class="img-thumbnail" alt="lewis land warrant" width="143" height="121"></p>
          <p>Robert Lewis transferred warrant #725 to his father on 17 Dec 1805.</p></div>
        <div class="imageBlockRight grid-item"><p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_smith_lofland_v_heirs_1.jpg class="img-thumbnail" alt="lewis land transfer" width="143" height="84"></p></div>
        <div class="imageBlockLeft grid-item"><p><img class="img-zoom" src=http://bartonlewis.com/_images/pg_p_lewis_smith_lofland_v_heirs_2.jpg class="img-thumbnail" alt="lewis land transfer" width="142" height="184"></p></div>
    </div>
    <div class="captionFull"><p>Smith Lofland's suit against the heirs of Alexander Lewis.</p></div>
  </div>
</div>
<!-- THIS IS THE END OF THE HTML -->

CSS:

#main {
  margin-top: 50px;
}
#article {
  width: 450px;
  float: left;
  margin-left: 75px;
  padding-right: 40px;
}
#article p {
  text-indent: 50px;
}
#gallery {
  width: 340px;
  padding:0 10px;
  //height: 3600px;
  float: left;
  background-color: #F8F1D4;
}
.grid-wrap{width:100%; position:relative}
.grid-item{z-index:1}
.grid-item:hover{z-index:2}
div.imageBlockFull {
  padding: 10px 0px 10px 20px;
  width: 300px;
  margin: 0 auto;
  float: left;
}
IMG.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto 
}
div.imageBlockLeft {
  padding:10px;
  width: 150px;
  float: left;
  //clear:left;
}    
div.imageBlockRight {
  padding:10px;
  width: 150px;
  float: right;
  //clear:right;
}
div.imageBlockFloatLeftClearLeft {
  padding: 10px 20px 10px 0px;   
  width: 150px;
  float: left;
  clear: left;
}
div.imageBlockLeft p:nth-child(2n+2) {
  font-family: "jaf-bernina-sans-narrow";
  font-size: .8em;
  line-height: 18px;
  border-bottom: 1px solid black;
  background-color: #F8F1D4;
}
div.imageBlockRight p:nth-child(2n+2) {
  font-family: "jaf-bernina-sans-narrow";
  font-size: .8em;
  line-height: 18px;
  border-bottom: 1px solid black;
  background-color: #F8F1D4;
}
.captionFull {
  float: left;
  margin: 0px 20px;
  padding: 0px 20px;   
  font-family: "jaf-bernina-sans-narrow";
  font-size: .8em;
  line-height: 18px;
  border-bottom: 1px solid black;
  background-color: #F8F1D4;
}
.captionFull  p {
  padding: 0px;
  margin: 0px;
}
p.centerHover {
  font-family: "jaf-bernina-sans-narrow";
  font-size: .9em;
  line-height: 20px;
  padding: 0 1em 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  width: 16em;
  text-align: center;
}
h1 {
  font-size: 1.2em;
  font-variant: small-caps;
  text-align: center;
  padding-top: 9px;
  padding-bottom: 11px;
  border-top: 2px solid #E3A300 !important;
  border-bottom: 2px solid #E3A300 !important;
}
/*THIS AFFECTS THE SPEED OF THE ZOOM*/
.img-zoom {
  width: 150px;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
}
/*THIS AFFECTS THE SIZE OF THE ZOOM*/
.transition {
  -webkit-transform: scale(4.5); 
  -moz-transform: scale(4.5);
  -o-transform: scale(4.5);
  transform: scale(4.5);
}

jQuery:

jQuery(document).ready(function($){
  $('.img-zoom').hover(function() {
    $(this).addClass('transition');
  }, function() {
    $(this).removeClass('transition');
  });

  $('.grid-wrap').masonry({
    //gutter: 10,
    itemSelector: '.grid-item'
  });
});

我如何保持填充以清除浮动

how do i keep padding for cleared float

html

css

css-float