时间戳

首页 > 解决方案 > Facebook 评论幻灯片在移动设备上未正确对齐 - HTML 代码

javascript - Facebook 评论幻灯片在移动设备上未正确对齐 - HTML 代码

问题描述

我无法在移动设备上对齐 HTML 幻灯片（我正在使用来自 facebook 的嵌入评论代码）。

出于某种原因，只有第一个评论在移动设备上显示对齐，但是当幻灯片切换到下一张幻灯片时，评论没有正确对齐显示。

此 URL 将在网站上显示结果： https ://oriavivi.com/pages/facebook-review

我已经尝试了几个带有 javascript 的代码，最后一个来自 W3 学校的代码来完成它，但到目前为止没有运气：

<div id="fb-root"></div>
<script async="" defer="defer" crossorigin="anonymous" src="https://connect.facebook.net/he_IL/sdk.js#xfbml=1&amp;version=v8.0" nonce=""></script>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<div align="center">
<div class="nature">
<div class="fb-post" data-href="https://www.facebook.com/tamila.meerzon/posts/3506844522677465" data-show-text="true" data-width="20">
<blockquote cite="https://www.facebook.com/tamila.meerzon/posts/3506844522677465" class="fb-xfbml-parse-ignore">
<p>שלום לכולם.לפני כמה ימים מצאתי את האתר והזמנתי פעם הראשונה. עשיתי החלטה מצויינת. גם הכרתי מעצבת נחמדה ומקצועית וגם אישה...</p>
פורסם על ידי ‏‎&lt;a href="https://www.facebook.com/tamila.meerzon">Tamila Meerzon</a>‎‏ ב- <a href="https://www.facebook.com/tamila.meerzon/posts/3506844522677465">יום רביעי, 20 במאי 2020</a></blockquote>
</div>
</div>
<div class="nature">
<div class="fb-post" data-href="https://www.facebook.com/meytal.grinberg/posts/10158027741254670" data-show-text="true" data-width="20">
<blockquote cite="https://www.facebook.com/meytal.grinberg/posts/10158027741254670" class="fb-xfbml-parse-ignore">
<p>אמאלה מושלם!!!!! צמיד נעים,איכותי ומהמם. מקבלת עליו מלא מחמאות... שירות אישי ומשלוח סופר מהיר ושירותי! ממליצה בחום❤❤❤ צמיד ראשון ובטוח לא אחרון</p>
פורסם על ידי ‏‎&lt;a href="#" role="button">Meytal Grinberg</a>‎‏ ב- <a href="https://www.facebook.com/meytal.grinberg/posts/10158027741254670">יום שישי, 7 בפברואר 2020</a></blockquote>
</div>
</div>
<div class="nature">
<div class="fb-post" data-href="https://www.facebook.com/galit.bitton.7/posts/10222133077450392" data-show-text="true" data-width="20">
<blockquote cite="https://www.facebook.com/galit.bitton.7/posts/10222133077450392" class="fb-xfbml-parse-ignore">
<p>השרות האדיב, העיצוב המשגע, מעבר לזה שרכשתי צמיד מושלם נהניתי לכל אורך התהליך</p>
פורסם על ידי ‏‎&lt;a href="#" role="button">Galit Bitton</a>‎‏ ב- <a href="https://www.facebook.com/galit.bitton.7/posts/10222133077450392">יום רביעי, 23 בספטמבר 2020</a></blockquote>
</div>
</div>
<div class="nature">
<div class="fb-post" data-href="https://www.facebook.com/liel.gov/posts/2724464070984846" data-show-text="true" data-width="20">
<blockquote cite="https://www.facebook.com/liel.gov/posts/2724464070984846" class="fb-xfbml-parse-ignore">
<p>רכשתי מאורי המקסימה צמיד מעלףףףףף הגיע עטוף בצורה מושלמת רואים את ההשקעה שלך בפרטים הקטנים </p>
פורסם על ידי ‏‎&lt;a href="https://www.facebook.com/liel.gov">Liel Gov</a>‎‏ ב- <a href="https://www.facebook.com/liel.gov/posts/2724464070984846">יום שלישי, 21 באפריל 2020</a></blockquote>
</div>
</div>
<div class="nature">
<div class="fb-post" data-href="https://www.facebook.com/permalink.php?story_fbid=2065362006941957&amp;id=100004045347142" data-show-text="true" data-width="20">
<blockquote cite="https://www.facebook.com/permalink.php?story_fbid=2065362006941957&amp;id=100004045347142" class="fb-xfbml-parse-ignore">
<p>רכשתי מאורי 3 צמידים מושלמים, בדיוק במידה! מהממים, השירות מהיר, אורי מקסימה, שירותית אדיבה וסובלנית. הצמידים פשוט מושלמים!!!</p>
פורסם על ידי ‏&lt;a href="#" role="button">טלי חיים</a>‏ ב- <a href="https://www.facebook.com/permalink.php?story_fbid=2065362006941957&amp;id=100004045347142">יום שלישי, 14 באפריל 2020</a></blockquote>
</div>
</div>
<div class="nature">
<div class="fb-post" data-href="https://www.facebook.com/saritca/posts/10214276283455003" data-show-text="true" data-width="20">
<blockquote cite="https://www.facebook.com/saritca/posts/10214276283455003" class="fb-xfbml-parse-ignore">
<p>חייבת להחמיא ... זו לא פעם ראשונה שאני קונה אצל אורי, הפעם הזמנתי לעצמי כי הייתי חייבת משהו לנפש, הסבלנות של אורי...</p>
פורסם על ידי ‏‎&lt;a href="#" role="button">Sarit Cohen Atia</a>‎‏ ב- <a href="https://www.facebook.com/saritca/posts/10214276283455003">יום שלישי, 24 במרץ 2020</a></blockquote>
</div>
</div>
</div>
<script>// <![CDATA[
w3.slideshow(".nature", 9000);
// ]]></script>

当尝试使用其他 javascript 编码修复它时，我遇到了完全相同的问题：

<div id="fb-root"></div>
<script async="" defer="" crossorigin="anonymous" src="https://connect.facebook.net/he_IL/sdk.js#xfbml=1&amp;version=v8.0" nonce=""></script>
<div class="slideshow-container">

<div class="mySlides">
  
  <div class="fb-post" data-href="https://www.facebook.com/galit.bitton.7/posts/10222133077450392" data-show-text="true" data-width="20">
<blockquote cite="https://www.facebook.com/galit.bitton.7/posts/10222133077450392" class="fb-xfbml-parse-ignore">
<p>השרות האדיב, העיצוב המשגע, מעבר לזה שרכשתי צמיד מושלם נהניתי לכל אורך התהליך</p>
פורסם על ידי ‏‎&lt;a href="#" role="button">Galit Bitton</a>‎‏ ב-&nbsp;<a href="https://www.facebook.com/galit.bitton.7/posts/10222133077450392">יום רביעי, 23 בספטמבר 2020</a>
</blockquote>
</div>
</div>

<div class="mySlides">
  
  <div class="fb-post" data-href="https://www.facebook.com/meytal.grinberg/posts/10158027741254670" data-show-text="true" data-width="20"><blockquote cite="https://www.facebook.com/meytal.grinberg/posts/10158027741254670" class="fb-xfbml-parse-ignore"><p>אמאלה מושלם!!!!!
צמיד נעים,איכותי ומהמם.
מקבלת עליו מלא מחמאות...
שירות אישי ומשלוח סופר מהיר ושירותי!
ממליצה בחום❤❤❤
צמיד ראשון ובטוח לא אחרון</p>פורסם על ידי ‏‎&lt;a href="#" role="button">Meytal Grinberg</a>‎‏ ב-&nbsp;<a href="https://www.facebook.com/meytal.grinberg/posts/10158027741254670">יום שישי, 7 בפברואר 2020</a></blockquote></div>
</div>

<div class="mySlides">
  
<div class="fb-post" data-href="https://www.facebook.com/tamila.meerzon/posts/3506844522677465" data-show-text="true" data-width="20"><blockquote cite="https://www.facebook.com/tamila.meerzon/posts/3506844522677465" class="fb-xfbml-parse-ignore">
<p>שלום לכולם.לפני כמה ימים מצאתי את האתר והזמנתי פעם הראשונה. 
עשיתי החלטה מצויינת. גם הכרתי מעצבת נחמדה ומקצועית וגם אישה...</p>פורסם על ידי ‏‎&lt;a href="https://www.facebook.com/tamila.meerzon">Tamila Meerzon</a>‎‏ ב-&nbsp;<a href="https://www.facebook.com/tamila.meerzon/posts/3506844522677465">יום רביעי, 20 במאי 2020</a>
</blockquote></div>


</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 9000); // Change image every 2 seconds
}
</script>


</div>

标签： javascripthtmljqueryfacebookshopify

解决方案

您只需要添加 CSS 即可解决此问题。这是CSS，

.fb_iframe_widget iframe, .fb_iframe_widget_fluid span{max-width: 100%;}

推荐阅读