国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

強制在沒有"white-space:nowrap"的div上使用float:left
P粉293550575
P粉293550575 2024-04-01 19:52:39
0
2
923

有這樣的東西:

<div class="container">

    <div class="floating">
      
      <img src="image" alt="">
      
      <p>
          text...
      </p>
      
    </div>
    
    <div class="floating">
      
      <img src="image" alt="">
      
      <p>
          text...
      </p>

    </div>
    
</div>

我希望「浮動」div 浮動在彼此的左側(cè),即使它們溢出了容器。

我嘗試在浮動 div 上使用“float:left”,但它不起作用。它們相互堆疊。

因此,我找到了一種解決方法,在浮動元素上使用“display:inline-block”,在容器上使用“white-space:nowrap”,它可以工作,但對我的情況沒有幫助。

.container{
    width:600px; 
    border:2px solid black;
    overflow:hidden;
    display:block;
    white-space:nowrap; /* delete this and see the actual floating divs layout*/
}

.floating{
    width:66%;
    display: inline-block;
}

img{
  width:120px; 
  height:120px;
  float:left;
}

事實上,「white-space:nowrap」阻止我的文字環(huán)繞浮動 div 中的 imgs,這是最初的意圖。 「white-space:nowrap」做了它應該做的事情,所以這個技巧似乎只在人們不關(guān)心將內(nèi)容包裝在 div 內(nèi)時才起作用。但在這種情況下我確實這麼做了。

所以,總而言之,如果我保留空白屬性,我的 2 個 div 會以應有的方式浮動,但其中的內(nèi)容會變得混亂。如果我不使用該屬性,則 div 內(nèi)的內(nèi)容將被保留,但 div 不會浮動。

https://jsfiddle.net/8n0um9kz/

有什麼解決方案可以讓我得到我想要的嗎?

謝謝。

PS:我在範例中為兩個浮動 div 使用了 66% 的寬度,以便您可以同時看到兩者以進行說明。就我而言,當然它們都是 100%。

P粉293550575
P粉293550575

全部回覆(2)
P粉004287665

是的。你有一個解決方案。

您可以在容器上使用'display : flex'和'flex-wrap :wrap',而不是在容器上使用'white-space : no-wrap'容器允許項目在到達容器末端時進入下一行。進一步使用 'justify-content : flex -start'

#
P粉054616867

我是這樣理解的。

.container{
    width:600px; 
    display:flex;  //required
    align-items: flex-start; //optional
    overflow:hidden;
}

.floating{
    min-width: 66%; //required
}

img{
  width:120px; 
  height:120px;
  float:left;
}

關(guān)鍵是在容器上使用“min-width”而不是“width”和“display:flex”。

無需使用區(qū)塊顯示、刪除浮動、調(diào)整內(nèi)容或包裝/展開任何內(nèi)容。

僅當浮動 div 應保持各自的高度時才需要“align-items: flex-start”,否則它們將採用最高 div 的高度。這不是問題,除非您為浮動 div 使用與容器不同的背景顏色。

https://jsfiddle.net/b83rzL07/1/

#謝謝。

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板