級聯樣式表定位問題

-1

我有一個div它包含五個img標籤。下面是HTML代碼：級聯樣式表定位問題

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="CSS/style.css"> 

</head> 
<body> 
    <div class="container"> 
     <img src="Images/1.jpg"/> 
     <img src="Images/2.jpg"/> 
     <img src="Images/3.jpg"/> 
     <img src="Images/4.jpg"/>   
    </div> 
</body> 
</html>

這裏是樣式表：

img 
{ 
    position:relative; 
    border:1px solid red; 
    width: 250px; 
    height: 150px; 
    margin-left:auto; 
    margin-right: auto; 
} 

.container 
{ 
    position:relative; 
    margin: 0 auto; 
    width: 80%; 
    border:1px solid red; 
    border-radius:10px; 
    padding:10px; 
}

當我調整瀏覽器窗口都弄亂。

這是正常的形式 enter image description here

這是形式的調整

enter image description here

後，我要把照片留在自己的地方。我該如何解決這個問題？

來源

2015-05-13 Arm_M

您可能需要對響應式設計進行一些研究。 –

添加white-space:nowrap;您.container DIV：

.container { 
    position:relative; 
    margin: 0 auto; 
    width: 80%; 
    border:1px solid red; 
    border-radius:10px; 
    padding:10px; 
    white-space:nowrap; 
}

來源

2015-05-13 19:19:10 j08691

刪除位置：相對並嘗試使用浮動：左或中心.container的

來源

2015-05-13 19:21:59 Coderzz

給寬度像素不如％。如果你有4個div給寬度（.container）1000px（4 * 250）。

來源

2015-05-13 19:22:18 Jayababu

級聯樣式表定位問題

回答

相關問題