1. 程式人生 > >之前設定橫向一直不行,看了這個,覺得可以

之前設定橫向一直不行,看了這個,覺得可以

初學HTML,遇到一個題需要將幾張圖放在一個邊框裡,並且需要橫向拖動

        想著很簡單,直接在div中設定width、height。並新增屬性“overflow:auto;”。但實際執行是發現圖片始終會換行,視窗只能上下滾動

        後來找到問題的原因,是因為由於在div中直接新增圖片,所以圖片會適應該div的大小,從而自動換行。而要做到不換行的效果,則需要在div中巢狀一層div2,設定div2的width > div的width,由此保證:圖片不會換行;在橫軸方向溢位,從而出現橫向滾動條。

        記錄以下程式碼一遍日後查閱

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4.     <metacharset="UTF-8">
  5.     <title>homework</title>
  6.     <style>
  7.         #kuang{  
  8.             border:1px solid #000;  
  9.             width: 500px;  
  10.             height: 120px;  
  11.             overflow:auto;  
  12.         }  
  13.         img:hover{  
  14.             /*滑鼠懸浮時,生成陰影輪廓*/  
  15.             box-shadow: 0px 0px 0px 1px red;  
  16.         }  
  17.         img{  
  18.             border-radius:5px;  
  19.             margin-top:10px;  
  20.         }  
  21.         div{  
  22.             /*設定內部巢狀的div寬度(大於外部div寬度)*/  
  23.             width: 700px;  
  24.         }  
  25.     </style>
  26. </head>
  27. <body>
  28.     <divid="kuang">
  29.             <
    div>
  30.                 <imgsrc="images/p_small_001.jpg">
  31.                 <imgsrc="images/p_small_002.jpg">
  32.                 <imgsrc="images/p_small_003.jpg">
  33.                 <imgsrc="images/p_small_004.jpg">
  34.                 <imgsrc="images/p_small_005.jpg">
  35.                 <imgsrc="images/p_small_006.jpg">
  36.                 <imgsrc="images/p_small_007.jpg">
  37.             </div>
  38.     </div>
  39. </body>
  40. </html>

轉載自:https://blog.csdn.net/lfq0404/article/details/79490943

相關推薦

之前設定橫向一直不行這個覺得可以

初學HTML,遇到一個題需要將幾張圖放在一個邊框裡,並且需要橫向拖動        想著很簡單,直接在div中設定width、height。並新增屬性“overflow:auto;”。但實際執行是發現圖片始終會換行,視窗只能上下滾動        後來找到問題的原因,是因為由

這個你還敢用分身版微信刷步嗎?

最近很多使用者把第三方修改的微信分身版各種瘋傳,不少人都安裝了不同功能的微信刷步分身版,不管是為了刷微信運動步數,一鍵轉發,一鍵評論還是帶有其它功能的微信分身版。 很顯然很多人安裝了這些分身版卻不知道其中可能存在的風險,這些微信分身版無非就是通過load command動態庫注入hook函式

現在做前端的人那麼多好的前端工資到底有多高這個當場說不出話!

首先,現在軟體行業發展趨勢,其次,一個軟體都快飽和的年代,人們的要求不再只是停留在功能上,更多的是體驗感,不只停留在html,更加追求在css,js上的效果和效能。所以:首當其衝的是樣貌——前端。在這裡我還是要推薦下我自己建的web前端開發學習群:617327703,群裡都是

大多數人可能都不會使用socketTimeout底層才知道一直都做錯

  前幾天一個機房網路抖動,引發了很多對外請求的超時問題,在發生問題排查日誌的時候,發現了這麼一個現象,httpclient我們的請求超時時間並沒有按照我們的設定報超時異常 我們的大概配置如下: RequestConfig requestConfig = RequestConfig.custom()

【轉】PHP開發經驗之談受益非淺

his 則表達式 處理 手冊 調用 緩存系統 字符串操作函數 如果能 諸多 用單引號代替雙引號來包含字符串,這樣做會更快一些。因為PHP會在雙引號包圍的字符串中搜尋變量,單引號則不會,註意:只有echo能這麽做,它是一種可以把多個字符串當作參數的“函數”(譯註:PHP手冊中

C/C++編譯器教程之如何安裝vs的人應該都會裝只要不手殘

什麽 dia color tps image spa pad 開始 有一個 這很簡單,其實我覺得不用教,但是吧,你們總有很多問題,所以,就有了這個安裝教程。以上是廢話。首先下載vs編譯器得相關文件就是這兩個文件,上面的txt和下面的iso文件對的,先下載,然後,下載完成之

VMware圖文安裝一秒竟然會

.VMware安裝步驟 1.雙擊VMware,如果沒有金鑰,往下文看,下文提供了一個金鑰用於軟體的解鎖 2.點選下一步 3.單選框不點選 4.點選下一步 5.完成VMware的安裝 我這安裝過的,沒顯示填寫金鑰框,這是金鑰:5A02H-AU243-TZ

重量級鎖 synchronized(不後悔必懂)

synchronized關鍵字並非一開始就該物件加上重量級鎖,也是從偏向鎖,輕量級鎖,再到重量級鎖的過程。這個過程也告訴我們,假如我們一開始就知道某個同步程式碼塊的競爭很激烈、很慢的話,那麼我們一開始就應該使用重量級鎖了,從而省掉一些鎖轉換的開銷。 互斥鎖(重量級鎖)也稱為阻塞同步、悲觀鎖

自旋鎖和自適應自旋鎖(不後悔必懂)

自旋鎖 所謂自旋,就是指當有另外一個執行緒來競爭鎖時,這個執行緒會在原地迴圈等待,而不是把該執行緒給阻塞,直到那個獲得鎖的執行緒釋放鎖之後,這個執行緒就可以馬上獲得鎖的。鎖在原地迴圈的時候,是會消耗cpu的,就相當於在執行一個啥也沒有的for迴圈。 本來一個執行緒把鎖釋放之後,當前執行緒

輕量級鎖(不後悔必懂)

輕量級鎖是由偏向鎖升級來的,偏向鎖執行在一個執行緒進入同步塊的情況下,當第二個執行緒加入鎖爭用的時候,偏向鎖就會升級為輕量級鎖(又叫做鎖膨脹);  輕量級鎖也被稱為非阻塞同步、樂觀鎖,因為這個過程並沒有把執行緒阻塞掛起,而是讓執行緒空迴圈等待,序列執行。 輕量級鎖適用於那些同步

偏向鎖(不後悔必懂)

它會偏向第一個訪問鎖的執行緒,如果在執行過程中,同步鎖只有一個執行緒訪問,不存在多執行緒爭用的情況,則執行緒是不需要觸發同步的,這種情況下,就會給執行緒加一個偏向鎖。 如果在執行過程中,遇到了其他執行緒搶佔鎖,則持有偏向鎖的執行緒會被掛起,JVM會消除它身上的偏向鎖,將鎖恢復到標準的輕

樂觀鎖和悲觀鎖(不後悔必懂)

鎖從巨集觀上分類,分為樂觀鎖和悲觀鎖 樂觀鎖是一種樂觀的思想,每次獲取資料的時候都不擔心資料會被修改,所以每次獲取資料的時候都不會加鎖,但是在更新的時候需要判斷該資料是否被人修改過.如果資料被其他執行緒修改,則不進行資料更新,否則,更新.由於資料沒有加鎖,期間該資料可以被其他執行緒進行讀寫操

hibernate和mybatis的區別(不後悔必懂)

①hibernate是一個標準的orm(物件關係對映)框架,通過JavaBean和資料庫的對映結構來自動生成sql;mybatis是不完全的orm框架,專注於sql本身,需要程式設計師自己寫sql; ②hibernate對sql的優化和修改比較困難,適合於需求變化不多的中小型專案,如ERP(

關於裝飾器幾篇文章總結下

裝飾器是為了動態為函式增加功能,而不改變函式的程式碼,而存在的。編寫一個高階函式,讓他接收另一個函式,在內部對其包裝,是為裝飾器。 裝飾器的本質就是一個函式,用來修飾你要裝飾的函式,別想複雜了。 呼叫裝飾器,下面是要修飾的函式,則下面的函式就整體看做一個變數,傳給了裝飾器函式,傳過去

恨日本人 此片不要妄信日本人民是善良的 勿忘國恥自強不息抵制日貨從我做起

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

談談你對AtomicInteger的理解(不後悔必懂)

AtomicInteger是一個提供原子操作的Integer類,通過執行緒安全的方式操作加減。十分適合高併發情況下的使用   對於全域性變數的數值型別操作 num++,若沒有加synchronized關鍵字則是執行緒不安全的,num++解析為num=num+1,明顯,這個操作不

如何執行緒安全地實現一個計數器(不後悔必懂)

i++是執行緒安全的嗎   i++和++i的執行緒安全分為兩種情況: 1、如果i是區域性變數(在方法裡定義的),那麼是執行緒安全的。因為區域性變數是執行緒私有的,別的執行緒訪問不到,其實也可以說沒有執行緒安不安全之說,因為別的執行緒對他造不成影響。 2、如果i是全域性變

ReentrantLock可重入鎖(不後悔必懂)

ReentraantLock是通過一個FIFO的等待佇列來管理獲取該鎖所有執行緒的。在“公平鎖”的機制下,執行緒依次排隊獲取鎖(先等待的執行緒先獲得鎖);而“非公平鎖”在鎖是可獲取狀態時,不管自己是不是在佇列的開頭都會獲取鎖。  ReentrantLock和synchroni

synchronized和Lock有什麼區別(不後悔必懂)

java語言中提供了兩種鎖機制來實現對某個共享資源的同步:synchronized和Lock.其中synchronized使用Object物件本身的notify,wait和notifyAll來實現執行緒之間的排程.而Lock可以使用Condition程序執行緒之間的排程 ①用法不同 sy

終止執行緒的方法(不後悔必懂)

在java語言中,可以使用stop()方法和suspend()方法來終止執行緒的執行. 當使用Thread.stop()來終止執行緒時,它會釋放已經鎖定的所有監視資源,具有不安全性 suspend()方法不會釋放鎖,容易發生死鎖(兩個或者兩個以上程序在執行過程中,因爭奪資源而造成程序間互