我创建了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/
答案 0 :(得分:3)
正如@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>
答案 1 :(得分:1)
在所有图片float: left;
容器上使用div
。
答案 2 :(得分:0)
Roflmyeggo的答案给了我一个角度,我找到了解决方案......
我把我的所有列都放到了正确的位置,左列现在保持原样。
基本上我改变了我的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;
}
谢谢Roflmyeggo !!!