iT邦幫忙

0

網頁縮小後出現空白格

  • 分享至 

  • xImage

如提,在網頁縮小後出現空白格,如下圖紅框處,在正常尺寸(1024768,1440900,19201080)開啟皆正常

只有在該台主機上會出現該情況,同樣問題在本地端不會出現,請問各位大大,可能是哪邊的問題呢(試過CSS排版,但依然無法將其對齊)?

archer9080 iT邦研究生 3 級 ‧ 2020-11-04 15:00:36 檢舉
不好意思打擾了
>同樣問題在本地端不會出現
有用無痕開過?方便提供code嗎?
jkes6203 iT邦新手 5 級 ‧ 2020-11-04 15:10:04 檢舉
php:

<div class="wrapper">
<div class="container inner">
<div class="home-title"><span class="border"></span></div>
<p class="home-subtitle"></p>
<ul class="other-list">
<?

$sql = 'SELECT id, `name`, `filename` FROM health_package_class ORDER BY sort, id';
$data = $db->doselect($sql);
foreach($data as $row){
echo '<li><a href="c01.php?class=', $row['id'], '"><img src="', $_env['site_upload_url'], 'health_package_class/', $row['id'], '/', $row['filename'], '" class="img-responsive"><p>', $row['name'], '</p></a></li>';
}
unset($data);
?>
</ul>
</div>
</div>

css:

.other-list{ width:100%; overflow:hidden; padding:10px 0; box-sizing:border-box;}
.other-list li{ width:31%; background-color:#fff; box-shadow:0px 0px 10px #ccc; float:left; margin:0 32px 30px 0; padding-bottom:20px; box-sizing:border-box; border-radius:20px;}
.other-list li a{ display:block; color:#444;}
.other-list li p{ font-size:18px; line-height:48px; padding:10px 0; box-sizing:border-box; text-align:center; background-image:url(../images/arrow.png); background-position:center bottom; background-repeat:no-repeat; font-weight:bold;}
.other-list li:nth-child(3){ margin:0 0 30px 0; }
.other-list li:nth-child(6){ margin:0 0 30px 0; }
.other-list li img{border-top-left-radius:20px;border-top-right-radius:20px;}

有在無痕開過了,但還是一樣狀況
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
㊣浩瀚星空㊣
iT邦大神 1 級 ‧ 2020-11-04 15:15:30
最佳解答

請提供對應的連結,好查看原因。
這樣子圖片。可能需要請神出來才知道。

要不然就請善用f12大法。來查看原因。
基本上如果你是用falot做排版的。有機會會變成這樣沒錯。

不過看不到你的html跟css很難判斷。

把你的 float:left; 改成 display: inline-block;
試試

jkes6203 iT邦新手 5 級 ‧ 2020-11-04 15:53:44 檢舉

感謝 已解決

我要發表回答

立即登入回答