Question

我不知道我做错了什么，但我的图片并没有在屏幕上并排显示？顺便说一下，我对CSS很陌生。理想情况下，我希望图像显示如此 - bensilvertown.com

提前致谢！

HTML：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>

<div class="work images">
<div>
    <a href="http://www.google.com"><img src="/Users/mac/Documents/PICTURES/cursor.png" />
    <p>This is image 1</p>
</div>
<div>
    <a href="http://www.google.com"><img src="/Users/mac/Documents/PICTURES/MIKE\ BRODIE.jpg" />
    <p>This is image 2</p>
</div>

</div>

</body>
</html>

CSS：

    html{
       background-color: #000000
   }

    html,body{
       color: #fff;
       font-family:
       font-weight:
    }

   /*align images side by side!*/
   div{
     float:left;
     margin-right:5px;
    }

    div > img{
      height:200px;
      width:200px;
    }

    p{
      text-align:center;
    }

Answer 1

在display:inline;

中插入div属性

Obs1：我们已经更改了您的图片路径以更好地验证您的代码 Obs2：你忘了在img
之前关闭你的标签<a> Obs3：只有在你有足够的分辨率时，它们才会并排。

https://jsfiddle.net/2ke6huxs/

Answer 2

是的，你错过了关闭而没有正确连接第二张图片<img src="/Users/mac/Documents/PICTURES/MIKE/BRODIE.jpg" />你可以看到差异。

尝试此操作在图像上添加浮动：

div > img{ height:200px; width:200px; float:left; }

页面上的图像没有对齐

2 个答案: