iT邦幫忙

0

css-div如何在body對齊,並左右留間隔

各位大大好:
想請問網頁中的wrapper要怎麼對齊置中body,並左右留空白,body底色是水藍色
因為不管是用手機看跟網頁看,不知道為甚麼右邊的寬度總是比左邊寬(會產生卷軸),應該要兩邊等寬
我是有用margin:0 10% 0 10% 設計..
然後想請問頭部的banner圖在手機板時要如何縮成一張圖,不超出大小呢?
謝謝
網頁如下:
https://jsfiddle.net/uhdo7zsf/2/

froce iT邦大師 5 級 ‧ 2019-02-20 08:17:10 檢舉
2.banner那邊有 background-size 可控制
background-size: 100% auto;
其他可控制選項和範例:
https://www.w3schools.com/cssref/css3_pr_background-size.asp

1.看起來像是什麼東西固定了大小造成。
設計RWD的時候要盡量用 %、vw、vh等相對單位配合 max-width/height、min-width/height設計。
mayyola iT邦新手 2 級 ‧ 2019-02-20 21:16:24 檢舉
謝謝,有找到方法了~大概是width都是用px定義,所以會超出..
1
浩瀚星空
iT邦大師 1 級 ‧ 2019-02-20 10:28:35
最佳解答

把你看到的 margin:0 10% 0 10% 拿掉就好了。

其實你的css架構看的有點花花的。可能你不是很專門的。

不過你會被撐大的原因就是你那一段

#wrapper {
    /* width: 100%; */
    position: relative;
    background: #FFF;
    margin: 0 10px 0 10px; 
    box-shadow: 0px 0px 150px 0px rgba(0,0,0,0.15);
    border: solid 1px #82A7AD;
    border-top: 0;
}

大約看了一下其實主要原因是因為你並沒將元件給與固定的元素寬度。所以其預設會出現100%。然後再加上你的margin左右10%。就變成了120%的寬度。難怪會被撐大。

給你一個修改的方式

#wrapper {
    width: 80%;
    position: relative;
    background: #FFF;
    margin: 0 auto; 
    box-shadow: 0px 0px 150px 0px rgba(0,0,0,0.15);
    border: solid 1px #82A7AD;
    border-top: 0;
}
mayyola iT邦新手 2 級 ‧ 2019-02-20 21:16:48 檢舉

謝謝 找到方法了

0
Peter
iT邦新手 5 級 ‧ 2019-02-20 19:28:43

你的div#pagediv#content的寬度太大,
超過了div#wrapper的寬度,
你那樣設 margin 某種程度上可以達到你要的效果,也不用設寬度。
不曉得這樣有沒有回答道你的問題

BTW,你是在練習 margin的詳細設定嗎?

margin: 0 10% 0 10%; /*上右下左*/
/* 你可以簡寫成  */
margin: 0 10%; /*(上下) (左右)*/
mayyola iT邦新手 2 級 ‧ 2019-02-20 21:17:02 檢舉

謝謝你~~

2
CSScoke
iT邦新手 5 級 ‧ 2019-02-20 22:42:29

來看一下【金魚都能懂的網頁設計入門】這個系列的教學你應該問題會少掉很多
https://ithelp.ithome.com.tw/users/20112550/ironman/2072

我要發表回答

立即登入回答