Question

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

如果我添加＆＃34;清除：左＆＃34;对于那个图像，填充不起作用 - 我猜是因为它被清除了？如何保持这些图像的填充，以便它们不会紧靠div的边缘？

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

＆＃13;

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

＆＃13;

#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);
}

＆＃13;

<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 -->

＆＃13;

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

使用jQuery Masonry库并熟悉这个问题;图像位置将动态处理;我的样本：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'
  });
});

我如何保持填充清除浮动

2 个答案: