整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
S方法：
$("body").attr('style','overflow-y:hidden') //這個是解決豎狀滾動條
//橫向 需要把overflow-y改成overflow-x即可
CSS辦法：
原始處理方法是將要展示的圖片進行處理。比如你的DIV寬度為500px（像素），那你上傳的圖片或放入網頁的圖片寬度就要小于500px，也就是你圖片需要圖片軟件剪切、等比例縮小方法處理后再上傳、放入網頁中解決撐破撐開DIV問題。
常見很多大型圖片站點、新聞站點都是將照片圖片進行處理適應網頁寬度情況下，進行圖片編輯處理的。
如果不處理照片方法適應DIV有限寬度，那可以對DIV設置隱藏超出內容方法。只需要對DIV設置寬度后加入CSS樣式“overflow:hidden”即可解決隱藏圖片比DIV過寬部分解決撐破DIV問題
三、解決方法三
對圖片img標簽中只加入寬度即可解決。這樣可以等比例縮小圖片，不會影響圖片畫面質量。
比如你的網頁DIV寬度為500px，那你上傳圖片后對img標簽設置width等于500以下即可。
<img src="圖片路徑" width="小于你的DIV寬度" />即可解決圖片過寬導致DIV SPAN撐破，這樣好處可以等比例放大縮小圖片
四、CSS解決撐破方法四
這種方法使用CSS直接對div內的img進行寬度設置，這樣不好是如果圖片過小會影響網頁瀏覽圖片時候效果。
Div結構：<div class="dc5"><img src="圖片路徑" /></div>
對應CSS代碼：.dc5 img{寬度值+單位}
五、CSS解決圖片撐破撐開DIV方法五
使用max-width（最大寬度），比如你DIV寬度為500px，那你對應DIV樣式再加入最大寬度CSS樣式“max-width="500px"”即可解決，但是在IE6瀏覽器不兼容此屬性，謹慎使用。
六、解決圖片撐破DIV層方法總結與推薦
1）、最大寬度（max-width）+overflow:hidden。我們這樣設置可以讓IE6版本以上瀏覽器支持最大寬度樣式，也讓IE6下隱藏圖片超出寬度而撐開DIV得到解決，此方法比較方便和實用。
2)、只使用overflow:hidden屬性，如方法二
3）、圖片使用上傳時候軟件處理下，以適應DIV布局寬度，如方法一
以上為推薦解決IMG圖片撐破有限DIV寬度方法，根據實際情況大家可以任意選擇適合自己解決網頁中圖片撐破DIV層方法。
前端對多個相同的標簽元素進行有序的排列是非常常見的需求，當我們有多個相似功能出現在同一個區域時我們就需要合理的排列這些元素。比如我這里的云服務提供了多個功能模塊展示給用戶，這個時候我們就會將每個模塊所涉及到的內容打包成一個整體來設計。
在Vue相似的功能展現我們可以通過v-for來實現，modulars中的數據我們口可以通過登錄直接從后臺獲取。這樣不管有多少個模塊我們都可以快速的實現DOM元素的渲染，也可以減少樣式的書寫，提高代碼執行效率。這里每個mould都是一個功能模塊的組合，里面包含了標題、圖片、和功能描述等信息。
元素排序主要是通過CSS樣式表來完成，我們都知道每個div盒子（class="mould"）的默認樣式屬性是獨占一行顯示，要想解決div獨占一行方法通常有兩種要么將該div設置浮動要么就設置display樣式。而父級的div高度通常由內容撐開，寬度通常可以用父級容器的百分百進行設定。
float可以定義元素的浮動屬性，使元素向左或向右移動來實現布局效果，常用來配合div標簽做網頁布局。float會使該元素脫離文檔流但仍然會占據位置（浮動元素會生成一個區域塊，不管是何種標簽元素都可以），其他相鄰的元素則會無視設置float屬性的元素緊跟其后繼續排列。如果對當前的所有元素設置浮動，那么就會當前的所有元素就會依次排列。所以利用float屬性可以實現并排顯示的效果，當然用完float浮動別忘了清除浮動。
標簽元素通過float浮動后不屬于html文檔流，浮動之后的元素如果需要回到文檔流中就需要將前面的浮動清除。清除浮動有多種方式可以實現，最簡單的方式就是在父級使用overflow:hidden來清除浮動。"overflow:hidden"可以溢出隱藏，設置該屬性可以將內容區域超出來的部分隱藏使內容區域完全包含在該包含塊中。利用該屬性可以讓父元素包住這個脫離了文檔流的浮動元素，以達到清除包含塊內子元素的浮動影響。
當然也可以用clear:both來清除浮動，clear可以指定元素對象不允許有浮動。利用clear:both清除浮動可以把float的元素拽回文檔流，實現方法可以在浮動元素的尾部添加一個空的div標簽并設置 clear:both屬性 或在下一個元素上加clear:both，可以可以在父級div定義創建偽元素:after設置clear:both屬性 。
display有兩種屬性情況分別是inline（同行顯示）和flex（彈性布局），display:inline屬性可以讓元素對象實現同行并排顯示（這個不是我們現在需要的效果）。display:flex是我們非常喜歡的的彈性布局方式，可以簡潔、快速的實現想要的彈性布局效果。定義了display:flex屬性之后可以通過 justify-content 屬性調整子元素的水平對齊方式，通過align-items屬性調整子元素的垂直對齊方式。當父元素寬度不夠時flex默認會等比例壓縮（不會自動換行），這時候我們需要通過設置 flex-wrap屬性（默認為 nowrap，這里指定wrap）來使其換行即可。
以上內容是小編給大家分享的【Vue實戰081：多HTML標簽元素如何實現并排顯示詳解】，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。更多Vue實戰技巧可以參考以下專欄：
、盒子模型
下圖中可以看到，在設置width的時候，標準的盒子模型是不包括border和padding的，而在IE瀏覽器中是包括這兩項的。
盒模型是有兩種標準的，一個是標準模型，一個是IE模型。
標準模型中，盒模型的寬高只是內容（content）的寬高，默認正是W3C標準盒模型。
而在IE模型中盒模型的寬高是內容(content)+填充(padding)+邊框(border)的總寬高。
/* 標準模型 */
box-sizing:content-box;
/*IE模型 */
box-sizing:border-box;
box-sizing:content-box padding和border都會撐開盒子，改變盒子的寬度高度
box-sizing:border-box padding和border都不會撐開盒子，不會改變盒子的寬度，盒子的內容會相應縮小。
2、盒子模型屬性
（1）border
border:width style color
style屬性
none 沒有邊框
solid 邊框為實線
dashed 邊框為虛線
dotted 邊框為點線
double 邊框為雙實線
表格的細線邊框合并：border-collapse:collapse
圓角邊框（CSS3）：border-radius:左上角 右上角 右下角 左下角
（2）padding
可以分開設置：padding-left padding-top padding-right padding-bottom
也可以放在一起設置：padding:10px 20px 30px 40px;
順序為↑→↓←
如果設置1個值，表示四個方向是同一個值
如果設置兩個值，表示上下 右左
如果設置三個值，表示上 右左 下
（3）margin
設置方法和padding相同，可以分開設置也可以放在一起設置。
行內元素只有左右外邊距，沒有上下外邊距。在ie6等低版本中是沒有內邊距的。
外邊距可以實現盒子居中，必須滿足兩個條件：
1． 必須是塊級元素
2． 盒子必須指定寬度
然后設置左右外邊距為auto，就可以實現水平居中
清除元素默認內外邊距
padding: 0;
margin: 0;
外邊距合并
場景一：
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合并。當上下相鄰的兩個塊元素相遇時，如果上面的元素有margin-bottom，下面的元素有margin-top，則他們之間的垂直間距不是margin-bottom和margin-top的和，而是取兩者中的較大的值作為兩個元素的邊距，這種現象稱為相鄰塊元素垂直外邊距的合并。
解決方法：
避免！（如此羞澀的解決方案）
場景二：
對于兩個嵌套關系的塊元素，如果父元素沒有padding-top和border，則父元素的margin-top會與子元素的margin-top發生合并，合并后的外邊距為兩者中的較大者。
解決方法：
1． 為父元素設定1px的border或padding-top
2． 為父元素添加overflow:hidden
3、盒子陰影
box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸 陰影顏色 內/外陰影
h-shadow 必選，水平陰影的位置，允許負值
v-shadow 必選，垂直陰影的位置，允許負值
blur 可選，模糊距離
spread 可選，陰影的尺寸（影子大小）
color 可選，陰影的顏色
inset 可選，將外部陰影改為內部陰影（外陰影為默認屬性，不需要寫，沒有outset屬性）
本文參考自https://www.jianshu.com/p/83cfe1a343fd。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
