Question

我有三张想要显示的图片，但我不能这样做，我无法理解为什么。

HTML：

    <div class="nav3">
<img class="bild" style="width: 100px; height:100px; align="left"" src="http://s1.bwallpapers.com/wallpapers/2014/01/20/white-rose-picture_111312696.jpg" alt="Mountain View" />

<img class="bild" style="width: 100px; height: 100px; align="left"" src="http://commun-it.ca/wp-content/uploads/2012/06/Big-Picture-Mountains-credit-blimiers2.jpg" alt="Mountain View" />

<img class="bild" style="width: 100px; height: 100px; align="left"" src="http://i.telegraph.co.uk/multimedia/archive/03157/Joel-Hindson_3157026k.jpg" alt="Mountain View" />
</div>

CSS：

.nav3 {
    background-color: #E9E8C7;
    height: auto;
    width: 150px;
    float: left;
    padding-left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    padding-top: 20px;
    padding-right: 20px;
}

.bild{
    display:inline-block;
    width: 64px; 
    height: 64px; 
   }

http://jsfiddle.net/3Un8J/130/

Answer 1

如果您的意思是内联而非倾斜，请查看此jsfiddle，

你必须增加容器块的宽度，然后所有图像都是内联的：

width: 350px;

Answer 2

每个img标记都有一个内联样式属性集，其中css样式规则将其宽度设置为100px（<img style="width: 100px;...）。这适用于最后但你的nav3-div只有150px的宽度。

您需要将宽度设置为350px（就像dajnz所说的那样）或者您需要删除该内联样式属性并将类.bild的css-width-property更改为50px或更改内联样式width-property为50px（考虑到最后两个选项，以防小图片可供您使用）

Answer 3

您需要使用"/usr/bin/ls"而不是倾斜。
您还需要删除.nav3类的宽度。
最后，如果您尝试将图像放在每个图像旁边另外，值得注意的是浏览器会放置那么小的空间使用时，每个元素旁边（在您的情况下是图像） display:inline-block。如果您想要触摸图像，则需要删除图像之间的所有空白区域。

Answer 4

您需要取出.nav3上的宽度，因为它设置为150px，图像宽度为100px。没有足够的空间。

水平显示图像

4 个答案: