問題描述之當盒子沒有設定寬高被內容撐開小BUG

2021-10-08 11:36:26 字數 1847 閱讀 2010

在專案開始時測量的資料用在盒子裡總是達不到預想效果,需要自己改掉部分資料,調整才能達到

下面簡單演示遇到的問題:

目標左右對齊,左邊尺寸為690px400px,右邊盒子上下上面的尺寸為480px210px,下面兩張小為235px*180px,而且經過測量原型圖右邊上下兩張部分的距離為10px,左右對齊,且這一整個大盒子的高度為400px。

此時的效果圖為

顯然我們可以發現右邊的高於左邊部分,並且經過頁面檢視此時左邊盒子尺寸為690px404px,右邊盒子尺寸為480.734px408px,不符合要求

此時我們的盒子是由內容撐開的,在div盒子裡會存在基線問題,因此我們可以給盒子設定定高定寬來解決問題

如下

>

.middle_img

.middle_img .left_img

.middle_img .right_img

.top_right_img

.bottom_right_img

.bottom_right_img .last_middle

style

>

此時的效果圖為

顯然此時已經對其,此時盒子的高度為400px。

在實際開發中,我們要習慣性的給盒子以寬高,多的部分隱藏,而不是讓盒子被內容撐開,避免後面的布局出現問題,當然具體情況還是要依據實際情況來定。。

實現沒有寬高的盒子水平垂直居中

實現乙個不設定寬高的盒子水平垂直居中的效果的方法 方法一 css 定位 讓其父元素相對定位,內部元素絕對定位,這裡的父元素為body。方法二 通過設定內部元素絕對定位,給乙個translate屬性,讓其在x軸和y軸進行平移。原理跟方法一相似。class ided 方法 三 通過display tab...

div設定寬高的問題

今天給乙個div定義了乙個類名,然後在css中給這個div設定寬。有兩種寫法 第一種直接是給div這整個型別設定,第二種是給類名設定。然後就出現了問題。用第一種方法時我可以直接設定width,注意是直接,也就是並沒有設定高。但是當我用第二種方法設定width時完全沒有效果顯示,後來發現給div設定乙...

設定寬高遇到的問題

在使用元素時必須設定寬度和高度,指定可以繪畫的區域大小。但是這裡設定寬度和高度的時候有乙個小問題。樣例 doctype html html head meta charset utf 8 title canvas繪圖 title head body canvas id drawimg width 3...