将照片放在左侧，将带有“关于我”按钮的说明放在右侧

Question

我的代码有问题。

当我更正它时，我左侧的照片消失了，并且描述的格式和关于我的按钮没有出现

所以我的问题是：

代码如下：

<div class="image">

    <img src="images/photo ze.jpg" alt="">

</div>



<div class="content">

    <h1>My name is José Moreira, I am

        <span

           class="txt-rotate"

           date-period="2000"

           data-rotate='[ "Graphic Design.", "Photographer.", "Web developer.",]'></span>

      </h1>

    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio doloribus ullam at commodi sit, excepturi dicta minus cumque rerum quod nisi sapiente accusantium, accusamus a atque totam adipisci. Who, error?</p>

    <a href="#about" class="btn">about me</a>

</div>

完整的代码位于：

https://jsfiddle.net/Quencyjones79/zrp9e12g/1/

https://codepen.io/Quencyjones79/pen/GRyZQeG

我非常感谢您的帮助。

Answer 1

在 CSS 中，您设置了以下 img 属性。将 display: none; 应用于 img 选择器后，页面上的图像将不可见，除非您使用另一个更具体的 CSS 规则覆盖该规则。

img{
    position: relative;
    width: 100%;
    display: none;
}

显示您关心的图像的一种方法是将 display: inline 添加到 .home .image img{} 选择器。我并不是说这是最好的方法，但它展示了如何定位您关心的特定图像并更改其显示属性。您还可以从 img 中删除 display: none 属性。

如果您有兴趣，了解如何使用开发者工具调试 CSS 。