Clearfix 在 chrome 43 中不起作用

Question

我创建了 3 个浮动列，我正在尝试使用 clearfix hack，但没有一个版本适合我。

我正在 Chrome 43 上查看我的网站，它看起来像这样： http://screencast.com/t/Dkenkh3Jq8SD

但在 Firefox 上，它看起来还不错。

我的网站的链接： http://idanmelamed.co.il/peppers-studio/

这是我的代码： http://jsfiddle.net/2zaeL9tk/

HTML：

<div class="main-content group">
    <div class="column-right col">
        <img src="http://idanmelamed.co.il/peppers-studio/img/itay-guitar.jpg" alt="איתי מנגן בגיטרה">
      <p>Peppers Studio בהנהלת  איתי בכרך, בוגר רימון... זה אומר שהוא ממש מקצועי!</p>         
    </div>
    <div class="column-center col">
        <img src="http://idanmelamed.co.il/peppers-studio/img/big-f-mixer.jpg" alt="נגן גיטרה">
       <p>אולפן הקלטות מקצועי בכפר-סבא. החולמים ליצירה יוכלו לקבל שירותי אולפן והפקה מוסיקאלית מקצועיים באווירה מיוחדת.</p>
    </div>
    <div class="column-left col">
        <img src="http://idanmelamed.co.il/peppers-studio/img/double-itay.jpg" alt="Trumpet and Sax">
       <p>רוצה ללמוד לנגן על גיטרה? לימודים באווירה של אולפן הקלטות. שיעור ניסיון ראשון ב-50% הנחה!</p>
    </div>     
  </div>

CSS：

    .main-content img {
    display: block;
    margin: auto;
    max-width: 100%;
    height: auto;
  }

  .column-right { 
    float: right; 
    width: 33.3333%;
  }

  .column-center { 
    display: inline-block; 
    width: 33.3333%; 
  }

  .column-left{
    display: block;
    float: left; 
    width: 33.3333%; 
  }

  .col {
    text-align: center;
  }

  .group::after {
  content: " ";
  display: table;
  clear: both;
  }

关于如何解决这个问题的任何想法？

编辑： 下面是一些不同浏览器的截图： http://browsershots.org/http://idanmelamed.co.il/peppers-studio/

Answer 1

正如@Cbroe 在上面的评论中所说的那样

不清楚你在问什么；你的小提琴和你的实际网站看起来 我的 Chrome 43 和 IE 11 和 Firefox 38 一样

我在 Chrome 43 和 Firefox 38 中都试过了，两者看起来都一样。

虽然我注意到您在 .col 中使用的是 float:left 和 float:right 以及 display:inline-block，当您可以简化时，它们会混合很多。

不是这个

 .column-right {
     float: right;
     width: 33.3333%;
 }
 .column-center {
     display: inline-block;
     width: 33.3333%;
 }
 .column-left {
     display: block;
     float: left;
     width: 33.3333%;
 }
 .col {
     text-align: center;
}

这里有 3 个为您简化的选项（可能会解决您遇到的问题 - 我们无法“看到”）

只使用float:left

 .main-content img {
   display: block;
   margin: auto;
   max-width: 100%;
   height: auto;
 }
 .col {
   text-align: center;
   float:left;
   width:33.3%
 }
 .group::after {
   content: " ";
   display: table;
   clear: both;
 }

<div class="main-content group">
  <div class="column-right col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/itay-guitar.jpg" alt="איתי מנגן בגיטרה">
    <p>Peppers Studio בהנהלת איתי בכרך, בוגר רימון... זה אומר שהוא ממש מקצועי!</p>
  </div>
  <div class="column-center col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/big-f-mixer.jpg" alt="נגן גיטרה">
    <p>אולפן הקלטות מקצועי בכפר-סבא. החולמים ליצירה יוכלו לקבל שירותי אולפן והפקה מוסיקאלית מקצועיים באווירה מיוחדת.</p>
  </div>
  <div class="column-left col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/double-itay.jpg" alt="Trumpet and Sax">
    <p>רוצה ללמוד לנגן על גיטרה? לימודים באווירה של אולפן הקלטות. שיעור ניסיון ראשון ב-50% הנחה!</p>
  </div>
</div>

只使用display:inline-block

.main-content {
  font-size:0 /*fix inline-block gap*/
}
.main-content img {
   display: block;
   margin: auto;
   max-width: 100%;
   height: auto;
 }
 .col {
   text-align: center;
   display:inline-block;
   vertical-align:top; /*optional*/
   font-size:16px;
   width:33.3%
 }
 .group::after {
   content: " ";
   display: table;
   clear: both;
 }

<div class="main-content group">
  <div class="column-right col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/itay-guitar.jpg" alt="איתי מנגן בגיטרה">
    <p>Peppers Studio בהנהלת איתי בכרך, בוגר רימון... זה אומר שהוא ממש מקצועי!</p>
  </div>
  <div class="column-center col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/big-f-mixer.jpg" alt="נגן גיטרה">
    <p>אולפן הקלטות מקצועי בכפר-סבא. החולמים ליצירה יוכלו לקבל שירותי אולפן והפקה מוסיקאלית מקצועיים באווירה מיוחדת.</p>
  </div>
  <div class="column-left col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/double-itay.jpg" alt="Trumpet and Sax">
    <p>רוצה ללמוד לנגן על גיטרה? לימודים באווירה של אולפן הקלטות. שיעור ניסיון ראשון ב-50% הנחה!</p>
  </div>
</div>

使用display:table-[cell]

.main-content {
  display:table;
  table-layout:fixed;
  width:100%;
}
.main-content img {
   display: block;
   margin: auto;
   max-width: 100%;
   height: auto;
 }
 .col {
   text-align: center;
   display:table-cell;
   vertical-align:top; /*optional*/
   width:33.3%
 }
 .group::after {
   content: " ";
   display: table;
   clear: both;
 }

<div class="main-content group">
  <div class="column-right col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/itay-guitar.jpg" alt="איתי מנגן בגיטרה">
    <p>Peppers Studio בהנהלת איתי בכרך, בוגר רימון... זה אומר שהוא ממש מקצועי!</p>
  </div>
  <div class="column-center col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/big-f-mixer.jpg" alt="נגן גיטרה">
    <p>אולפן הקלטות מקצועי בכפר-סבא. החולמים ליצירה יוכלו לקבל שירותי אולפן והפקה מוסיקאלית מקצועיים באווירה מיוחדת.</p>
  </div>
  <div class="column-left col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/double-itay.jpg" alt="Trumpet and Sax">
    <p>רוצה ללמוד לנגן על גיטרה? לימודים באווירה של אולפן הקלטות. שיעור ניסיון ראשון ב-50% הנחה!</p>
  </div>
</div>

Answer 2

在您的所有图像 div 容器上使用 float: left;。

Answer 3

Rolfmyeggo 的回答给了我一个角度，我找到了解决办法……

我将所有列都向右浮动，而左列现在停留在应有的位置。

基本上我把我的 css 改成了这样：

.column-right {  
    width: 33.3333%;
  }

  .column-center { 
    width: 33.3333%; 
  }

  .column-left{
    display: block;
    width: 33.3333%; 
  }

  .col {
    text-align: center;
    float: right;
  }

  .group::after {
  content: " ";
  display: table;
  clear: both;
  }

谢谢罗夫米格！！！