1. 首頁
  2. 問答
  3. div元素和顯示行內塊

div元素和顯示行內塊

2017-06-02 79 views
0

我試了一段時間才明白爲什麼這個代碼不能按預期工作。div元素和顯示行內塊

以下代碼應顯示白色條紋，綠色條紋，白色條紋，沒有間隙。

有一個容器內部的三個div的，所有的2個格是20％的寬度，一個是60％的寬度，邊框，填充，保證金爲0

現在的問題是，爲什麼我還是看到了「保證金」，白色和綠色塊之間？

，如果你想給一個嘗試

https://jsbin.com/lexekimoba/edit?html,css,output

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0px solid red; 
 
} 
 

 
body { 
 
    background-color: #888; 
 
} 
 

 
.container1 { 
 
    background-color: #aaa; 
 
} 
 

 
.main { 
 
    width: 60%; 
 
    background-color: green; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
} 
 

 
.side { 
 
    box-sizing: border-box; 
 
    width: 20%; 
 
    display: inline-block; 
 
    background-color: white; 
 
}
<div class="container1"> 
 
    <div class="side">s</div> 
 
    <div class="main"> 
 
    abcdef 
 
    </div> 
 
    <div class="side">s</div> 
 
</div>

來源

2017-06-02 LXG

+0

你的代碼，同時設置左，右兩側爲白色，而不管它們的顯示方式。你需要一個額外的班級才能拿到紅色的格子，否則你最終會變成白色的。你的'純紅'只是一個'border'' style'和'color'，因爲它沒有線寬（它被設置爲0），它永遠不會顯示 從側面移除背景顏色並創建兩個其他類; l和r（左側和右側）在html中添加側（.l/.r）後的類，左邊爲白色，右邊爲紅色.main {width：58.5％; } .side {same ..remove bgcolor} .l {background-color：white;}。r {background-color：red;} –

+0

https://jsfiddle.net/RachGal/mc71ocr6/ –

回答

1

這是由於div之間出現的換行符（HTML代碼）。如果您刪除這些，它的工作原理：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0px solid red; 
 
} 
 

 
body { 
 
    background-color: #888; 
 
} 
 

 
.container1 { 
 
    background-color: #aaa; 
 
} 
 

 
.main { 
 
    width: 60%; 
 
    background-color: green; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
} 
 

 
.side { 
 
    box-sizing: border-box; 
 
    width: 20%; 
 
    display: inline-block; 
 
    background-color: white; 
 
}
<div class="container1"> 
 
    <div class="side">s</div><div class="main"> 
 
    abcdef 
 
    </div><div class="side">s</div> 
 
</div>

來源

2017-06-02 16:57:14 Johannes

1

刪除的div

*{ \t 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0px solid red; \t \t 
 
} 
 

 

 
body{ 
 
\t background-color: #888; 
 
\t 
 
} 
 

 
.container1{ \t 
 
\t background-color: #aaa; 
 
\t 
 
} 
 

 
.main{ 
 
\t width: 60%; 
 
\t background-color: green; 
 
\t display: inline-block; 
 
\t box-sizing: border-box; \t 
 
\t 
 
} 
 

 
.side{ 
 
    box-sizing: border-box; 
 
\t width: 20%; 
 
\t display: inline-block; 
 
\t background-color: white; 
 
\t \t 
 
}
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>div align</title> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width"> 
 
\t \t <link rel="stylesheet" type="text/css" href="divalign.css"> 
 
\t </head> 
 
\t <body> 
 

 
\t \t <div class="container1"> 
 
      <div class="side">s</div><div class="main"> 
 
\t \t \t abcdef \t 
 
\t \t \t </div><div class="side">s</div> 
 
      
 
\t \t </div> 
 

 

 
\t </body> 
 
</html>
之間的空白

或在內聯塊元素之間使用<!-- -->。

*{ \t 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0px solid red; \t \t 
 
} 
 

 

 
body{ 
 
\t background-color: #888; 
 
\t 
 
} 
 

 
.container1{ \t 
 
\t background-color: #aaa; 
 
\t 
 
} 
 

 
.main{ 
 
\t width: 60%; 
 
\t background-color: green; 
 
\t display: inline-block; 
 
\t box-sizing: border-box; \t 
 
\t 
 
} 
 

 
.side{ 
 
    box-sizing: border-box; 
 
\t width: 20%; 
 
\t display: inline-block; 
 
\t background-color: white; 
 
\t \t 
 
}
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>div align</title> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width"> 
 
\t \t <link rel="stylesheet" type="text/css" href="divalign.css"> 
 
\t </head> 
 
\t <body> 
 

 
\t \t <div class="container1"> 
 
      <div class="side">s</div><!-- 
 
\t \t \t --><div class="main"> 
 
\t \t \t abcdef \t \t \t \t 
 
\t \t \t </div><!-- 
 
      
 
      --><div class="side">s</div><!-- 
 
      
 
\t \t --></div> 
 

 

 
\t </body> 
 
</html>

你可以閱讀更多關於兩個同軸div之間出現它here

來源

2017-06-02 16:54:28 XYZ

相關問題

 相關問題