如何显示左对齐的图像？

我有这样的：如何显示左对齐的图像？

<html> 
<head> 
    <title></title> 
    <meta http-equiv='Content-Type' content='text/html; charset=utf8'> 
    <style type='text/css'> 
     body { 
      background-color: #000; 
     } 
    </style> 
</head> 
<body> 
    <img src="1.jpg" height="100%" style="float: left;" /> 
    <img src="2.jpg" height="100%" style="float: left;" /> 
    <img src="3.jpg" height="100%" style="float: left;" /> 
    <img src="4.jpg" height="100%" style="float: left;" /> 
</body> 
</html>

这是大图。但我的浏览器向我展示了两个图像并排放在一起，然后以一个新的线条显示。我想把它全部放在一行中。怎么做？

来源

2011-11-06 Nips

为什么“HEIGHT =” 100％“; – nikan

这是一个有点不清楚你想要什么你想在同一行中的所有图像，或者你想要的图像垂直堆叠，但对齐到容器的左侧？ –

这是在Android显示器上显示的图像。我想显示图像填满整个屏幕，然后在左侧。 – Nips

停止浮动图像并将white-space: nowrap设置在身体或其他包装元素上。

body { 
    white-space: nowrap; 
}

和：

<body> 
    <img src="1.jpg" height="100%" /> 
    <img src="2.jpg" height="100%" /> 
    <img src="3.jpg" height="100%" /> 
    <img src="4.jpg" height="100%" /> 
</body>

演示：http://jsfiddle.net/ambiguous/4Udam/

来源

2011-11-06 18:21:53