佈局寬度css

我無法將所有圖像放在一行中。圖像寬210px，無邊距，無填充無邊框，容器寬1050px。沒有邊距，沒有填充，沒有邊框，所以210x5 = 1050px，應該適合？佈局寬度css

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Ejercicio 9</title> 
    <style> 
     body{ 
      margin:0; 
      white-space: nowrap; 
     } 
     #bolas{ 
      margin: auto auto; 
      width: 1050px; 
      } 

     .bolas_billar{ 
      margin: 0; 
      padding: 0; 
      /* 
      display: inline; 
      position: relative; 
      top: 50%; 
      margin-top: -85px; 
      */ 
     } 

    </style> 
</head> 
<body> 
    <div id="bolas"> 
     <img id="bola7" class="bolas_billar" src="./images/bola7.jpeg" alt="Bola billar 7" width="210" height="170"> 
      <img id="bola8" class="bolas_billar" src="./images/bola8.jpeg" alt="Bola billar 8" width="210" height="170"> 
     <img id="bola9" class="bolas_billar" src="./images/bola9.jpeg" alt="Bola billar 9" width="210" height="170"> 
     <img id="bola10" class="bolas_billar" src="./images/bola10.jpeg" alt="Bola billar 10" width="210" height="170"> 
     <img id="bola13" class="bolas_billar" src="./images/bola13.jpeg" alt="Bola billar 13" width="210" height="170"> 
    </div> 
</body> 
</html>

http://jsfiddle.net/x2mv94vm/

來源

2014-10-28 user2670996

使用[Flexbox的]（http://css-tricks.com/代碼段/ CSS /一個引導到Flexbox的/） – 2014-10-28 09:29:55

添加font-size:0到主容器#bolas。如果你想在容器內的一些文本，然後分別指定字體大小：

body { 
    margin:0; 
} 
#bolas { 
    margin: auto auto; 
    width: 1050px; 
    font-size:0; // Added 
} 
.bolas_billar { 
    margin: 0; 
    padding: 0; 
}

演示：http://jsfiddle.net/lotusgodkk/x2mv94vm/3/

來源

2014-10-28 09:32:13

使用float:left下一個浮動他們每個。

.bolas_billar { 
    margin: 0; 
    padding: 0; 
    float:left; 
}

http://jsfiddle.net/x2mv94vm/4/

來源

2014-10-28 09:34:10 secelite

添加"float:left"屬性".bolas_billar"

來源

2014-10-28 09:34:42 theinvisible

body{margin:0;}

添加此代碼

#bolas{margin: 0 auto;width: 1050px;float:left;} 

.bolas_billar{margin: 0;padding: 0;}

來源

2014-10-28 10:06:29

佈局寬度css

回答

相關問題