iT邦幫忙

1

菜鳥發問 消間隔與圖片置中

  • 分享至 

  • xImage

目前才剛學幾個月,以書本教材練習了一個簡略版網頁但code寫的與書本不同,
請問版上有經驗的大大,我遇到以下兩個問題 (如圖)
https://ithelp.ithome.com.tw/upload/images/20191019/20122299KehBuIluuf.png

題一: 我試過增margin與display:block去消除大圖與下一段concept的艱鉅,但都沒效... 是哪裡該處理呢?
題二: 為了讓圖在文字右邊所以設了 float:right,結果反而太右邊該怎麼辦?

以下是我的code
https://jsfiddle.net/Sandra523/odukf4b6/11/

感謝~~

ccutmis iT邦高手 2 級 ‧ 2019-10-20 11:24:15 檢舉
樓主問的第一個問題在head區放入下列這行應該就解決了:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

問題二...建議先從HTML基礎學起,
覺得樓主的html標籤誤用問題比css問題嚴重
(例如section裡包nav,你是不是要用div卻打成nav了o_o???),
能用正確的html標籤把內容包裝進去,再來才是研究CSS頁面美化...
(所以這邊css怎麼寫不用想了,html標籤打掉重練才對)
我弄了一個基本的html架構(比你原本寫的沒問題,是不是完全沒問題我也不知道^^") 提供您參考:
http://www.web3d.url.tw/demo/USER/layout/scroll-and-scale-underline/both/
註: 只是簡單弄的demo,沒有做RWD。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
2
dragonH
iT邦超人 5 級 ‧ 2019-10-19 17:42:24
最佳解答

首先

你要打開瀏覽器的 console 看

你有很多不合法的 css

所以才沒有作用

題一: 我試過增margin與display:block去消除大圖與下一段concept的艱鉅,但都沒效... 是哪裡該處理呢?

H2 的 css

margin: 0px;

題二: 為了讓圖在文字右邊所以設了 float:right,結果反而太右邊該怎麼辦?

首先你有一個問題

html 的順序是

由上到下

由左到右

所以你想要圖片在文字的右邊

順序應該是 <p><img>(在沒有特別寫 css 的情況下)

然後因為 <p> 是 display: block

所以 <img> 會被換行

然後你又有 float: right

所以<img> 就會跑到該行的右邊

也就是你看到的

以上是我的理解

像要達到你要的結果

可以改用 flex

jsfiddle

你的圖沒辦法看

所以我不確定你的那些圖效果是怎樣

就試試看吧

看更多先前的回應...收起先前的回應...
ccutmis iT邦高手 2 級 ‧ 2019-10-19 18:04:15 檢舉

借貼一下... /images/emoticon/emoticon01.gif
斯斯有兩種,參考方法也有兩種:

好的那種 :建議先從HTML基礎學起,我覺得樓主的html標籤誤用問題比css問題嚴重(例如section裡包nav,你是不是要用div卻打成nav了o_o???),能用正確的html標籤把內容包裝進去,再來才是研究CSS頁面美化...(所以這邊css怎麼寫不用想了,html標籤打掉重練才對)

不好的那種 :底下的解法參考
把原本的:

section img{
    float: right; 
}
section{
    overflow: hidden; 
}

換成:

section{clear:both;padding:20px;}
section img{
    float: right; width:150px; height: 100px;margin-right: calc( 50% - 150px );margin-left:0px; }
section p{  float:right; }

因為這是不好的方法,我就BJ4了...

dragonH iT邦超人 5 級 ‧ 2019-10-19 18:06:18 檢舉

/images/emoticon/emoticon32.gif

不過他說以書本教材練習

我覺得這本書可能不太妙XD

ccutmis iT邦高手 2 級 ‧ 2019-10-19 18:08:54 檢舉

/images/emoticon/emoticon04.gif

/images/emoticon/emoticon15.gif

小魚 iT邦大師 1 級 ‧ 2019-10-20 12:57:23 檢舉

前端一直在進步,
書本學的都只是基礎,
就像國小教材一樣,
真正的學習是從實作開始。

ccutmis iT邦高手 2 級 ‧ 2019-10-20 14:42:04 檢舉

教材也是有分等級的,
例如 O'REILLY 跟 文淵閣 …

p.s: 我沒說誰好誰差喔,別告我... /images/emoticon/emoticon48.gif

0
阿展展展
iT邦好手 1 級 ‧ 2019-10-19 17:33:48

css 裡

section img{
float: right;
}

dragonH iT邦超人 5 級 ‧ 2019-10-19 17:46:45 檢舉

他的 code 本來就有寫這個唷/images/emoticon/emoticon11.gif

他這個要改阿

dragonH iT邦超人 5 級 ‧ 2019-10-19 18:01:57 檢舉

/images/emoticon/emoticon26.gif

1
小魚
iT邦大師 1 級 ‧ 2019-10-20 12:55:02

你是不是有用一些套件如Bootstrap之類的?
建議你先把所有CSS 樣式先學一下,
然後善用 開發人員工具 找原因

我要發表回答

立即登入回答