在移動設備上查看柔性盒之間的不需要的餘量

當我的網頁在移動設備上查看時，我的網頁上存在一個問題，該問題涉及柔性盒旁邊的邊距彈出。我已經將問題歸結爲一些非常簡單的代碼。在移動設備上查看柔性盒之間的不需要的餘量

HTML代碼

<html> 
    <head> 
     <link href="style.css" rel="stylesheet"> 
    </head> 
    <body> 

     <div class="container"> 
      <!-- When you remove this period, issue goes away --> 
     . 

      <div class="smallboxes"> 
       <div class="smallbox1"> 
       </div> 
       <div class="smallbox2"> 
       </div> 
      </div> 

      <div class="bigbox"> 
      </div> 

     </div> 

    </body> 
</html>

CSS代碼

.container { 
display: flex; 
height: 100px; 
} 

.bigbox { 
flex: 2; 
background-color: #6e6e6e; 
display: flex; 
} 

.smallboxes { 
flex: 1; 
display: flex; 
flex-direction: column; 
} 

.smallbox1 { 
flex: 2; 
background-color: #6e6e6e; 
} 

.smallbox2 { 
flex: 1; 
}

當您運行在Chrome的代碼中，單擊鼠標右鍵，單擊「檢查」，查看由於iPad在水平模式Pro和更改視圖到75％或125％。你會在兩個盒子之間看到一條白線。這也顯示在我的Note 5上。兩個灰色框之間不應該有線。

正如我在代碼中提到的那樣，當您刪除句點時，問題就會消失。

非常感謝您的幫助！

P.S.我是新來的，似乎無法弄清楚如何插入「在此代碼上運行代碼」按鈕。我還包括一個鏈接到codepen版本。

http://codepen.io/jasonhoward64/pen/XMpYXJ

來源

2017-03-09 Jason Howard

編輯：根據筆者

我一直在玩你的Codepen，問題是因爲使用「：1的Flex」的評論新的答案。 Flex在「容器」內創建所需的空間。如果你給「.bigBox」flex：2;和「.smallBoxes」flex：1;它會將「.container」分成3個部分，其中bigBox將佔用2個。當你在容器內添加一個項目而沒有給它一個彈性值時，它會嘗試計算所需的空間。嘗試將點放在span或div（或其他元素）中並將其設置爲flex-value。這將解決您的問題。

.container { 
 
    display: flex; 
 
    height: 100px; 
 
    background: red 
 
} 
 

 
.bigbox { 
 
    flex: 5; 
 
    background-color: #6e6e6e; 
 
    display: flex; 
 
} 
 

 
.testBox { 
 
    background: yellow; 
 
    flex: 1; 
 
} 
 

 
.smallboxes { 
 
    flex: 3; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.smallbox1 { 
 
    flex: 2; 
 
    background-color: #6e6e6e; \t 
 
} 
 

 
.smallbox2 { 
 
    flex: 1 
 
}

<html> 
 
    <head> 
 
    <link href="style.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 

 
    <div class="container"> 
 
     <!-- When you remove this period, issue goes away --> \t <span class="testBox">test</span> 
 
     <div class="smallboxes"> 
 
     <div class="smallbox1"> 
 
     </div> 
 
     <div class="smallbox2"> 
 
     </div> 
 
     </div> 
 

 
     <div class="bigbox"> 
 
     </div> 
 

 
    </div> 
 

 
    </body> 
 
</html>

來源

2017-03-09 09:59:09

我已經在我的三星注5：它的行爲完全像在iPad上的PC的Chrome瀏覽器模式表示測試這一點。這似乎只是一個手機問題。 –

我剛剛注意到你的看法變回了100％。如果從水平向縱向翻轉後將其更改爲75％或125％，則會發現問題仍然存在。 –

檢查我的新答案:) –

你的代碼工作，但是當你添加的0保證金的身體，它再次打破。你知道爲什麼嗎？

body { 
 
margin: 0; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    height: 100px; 
 
    background: red 
 
} 
 

 
.bigbox { 
 
    flex: 5; 
 
    background-color: #6e6e6e; 
 
    display: flex; 
 
} 
 

 
.testBox { 
 
    background: yellow; 
 
    flex: 1; 
 
} 
 

 
.smallboxes { 
 
    flex: 3; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.smallbox1 { 
 
    flex: 2; 
 
    background-color: #6e6e6e; \t 
 
} 
 

 
.smallbox2 { 
 
    flex: 1 
 
}

<html> 
 
    <head> 
 
    <link href="style.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 

 
    <div class="container"> 
 
     <!-- When you remove this period, issue goes away --> \t <span class="testBox">test</span> 
 
     <div class="smallboxes"> 
 
     <div class="smallbox1"> 
 
     </div> 
 
     <div class="smallbox2"> 
 
     </div> 
 
     </div> 
 

 
     <div class="bigbox"> 
 
     </div> 
 

 
    </div> 
 

 
    </body> 
 
</html>

來源

2017-03-11 20:20:04

在移動設備上查看柔性盒之間的不需要的餘量

回答

相關問題