css 邊邊會留白

html css

神威 2021-03-03 10:21:00 ‧ 1785 瀏覽

分享至

大家好，
想請教大家，我將網頁切割成left 和right，
left和right為不同顏色
以上都OK

但是left和right的邊邊還是會留一條白白的
我都已經width 50% ,50%了，他還是不行
程式碼:

<!DOCTYPE html>
<html lang="en">
 
<style>
/* Pen-specific styles */
 
html, body, section, div {
  height: 100%;
}
 
/* Pattern styles */
.left-half {
	 background:linear-gradient(56.31deg,#ff6b24  8.83%, #FFE53b 71.21%) 100% 100% no-repeat fixed;
  
  float: left;
  width: 50%;
  overflow:hidden;
  display:flex;
}
.right-half {
  background: linear-gradient(33deg, #24DD40 8.83%, #B9FF00 71.21%);
  float: left;
  width: 50%;
  overflow:hidden;
  display:flex;
}
</style> <body>
 
<section class="container-fluid">
  <div class="left-half">
      Left Half 
  </div>
  <div class="right-half">    
       Right Half 
  </div>
</section>

</body>
</html>

謝謝大家

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

dragonH

iT邦超人 5 級 ‧ 2021-03-03 10:26:59

最佳解答

* {
    margin: 0
}

這樣

codepen

回應 9
分享
檢舉

看更多先前的回應...收起先前的回應...

神威 iT邦研究生 4 級 ‧ 2021-03-03 10:37:18 檢舉

dragonH好:報告大大，我的還是一樣耶.....

神威 iT邦研究生 4 級 ‧ 2021-03-03 10:39:33 檢舉

我發現我把head.php抽掉就好了，可是這PHP我一定得import....
head.php:

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
	<link  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" rel="stylesheet">
	<link  href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.css" rel="stylesheet">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
	<link rel="stylesheet" type="text/css" href="css_js/web.css" />
	<script src="images/web.js" /></script>

dragonH iT邦超人 5 級 ‧ 2021-03-03 10:46:42 檢舉

那就看你的那個 php 有沒有 css 會影響的

神威 iT邦研究生 4 級 ‧ 2021-03-03 10:54:41 檢舉

了解，請問我可以直接用!important蓋過去嗎?謝謝

神威 iT邦研究生 4 級 ‧ 2021-03-03 11:01:48 檢舉

抓到了，是 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">搞的鬼，但我還是得用boottrap，看來無解了!?

dragonH iT邦超人 5 級 ‧ 2021-03-03 11:13:53 檢舉

了解，請問我可以直接用!important蓋過去嗎?謝謝

如果你 ok 而且這樣可以達到你的目的

那就看你囉

但是這不是好辦法

現在欠的債遲早要還的

ccutmis iT邦高手 2 級 ‧ 2021-03-03 11:37:14 檢舉

我的感覺是樓主還沒掌握好bs框架的用法既然用了bs框架遇到問題應該先從框架裡找解答確定是框架本身辦不到的才寫code去覆蓋bs的規則但是你反過來做結果就是會很常遇到寫的code跟bs框架打在一起...
舉個例 bs 本身有 Grid system 可以讓div 50% 50% 排列不需用老式的css語法(float:left;width:50%;) 在bs框架可以這樣做:

<div class="row">
  <div class="col-sm vh-100 bg-warning">
      Left Half 
  </div>
  <div class="col-sm vh-100 bg-light">    
       Right Half 
  </div>
</div>

這裡只是舉個例而已啊，說錯的話請勿見怪XD