Html 如何在不超出屏幕的情况下将图像放置在文本旁边？_Html_Css

Html 如何在不超出屏幕的情况下将图像放置在文本旁边？

html css

Html 如何在不超出屏幕的情况下将图像放置在文本旁边？,html,css,Html,Css,我试图将图片定位在文本旁边，但我不知道如何调整边距，使文本向左浮动，而不会在旁边留下大的空白。另外，可能是因为图片太大，网页一直超出屏幕区域，浏览器会在下方显示滚动条。我应该如何解决这个问题我希望它看起来像这个网站：这是我的密码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Larry Rosenburg O

我试图将图片定位在文本旁边，但我不知道如何调整边距，使文本向左浮动，而不会在旁边留下大的空白。另外，可能是因为图片太大，网页一直超出屏幕区域，浏览器会在下方显示滚动条。我应该如何解决这个问题

我希望它看起来像这个网站：

这是我的密码：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Larry Rosenburg Official Website </title>
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Anton|Crimson+Text:400,700,700i|Rakkas" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Cherry+Swash|Cinzel|Gentium+Basic|Muli" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">
    </head>

    <body>
        <header>
            <div id="logo">
                <img src ="lincoln.jpg" width ="30%" alt="Lincoln logo" id="logo_picture">
                <nav>
                    <ul>
                        <li> <a href="index.html"> Home </a> </li>
                        <li> <a href="lincoln.html"> Lincoln </a> </li>
                        <li> <a href="about.html"> About </a> </li>
                        <li> <a href="contact.html"> Contact </a> </li>
                    </ul>
                </nav>

            </div>
        </header>


        <div id="name">
            <p>
                Larry Rosenburg
            </p> 
        </div>
        <div id="profile-pic">
            <img src="placeholder.jpg" width="30%" alt="" >
        </div>


    </body>

    <footer>
    </footer>

</html>

这里的最佳解决方案实际上是将图像设置为父元素的背景

您发送的示例链接通过使用

img

元素但将其隐藏并使用src属性来执行一些复杂的操作

但是，如果调整浏览器的大小，您将看到图像和文本在小屏幕上重叠。因此，它们不是相邻元素，而是文本和背景

#名称{
背景：url(https://static1.squarespace.com/static/541ff355e4b03f1e8815bc58/t/55c0b5abe4b0ec33f39abc7e/1438692796595/Try+1.jpg),；
背景尺寸：封面；
背景位置：50%40%；
高度：300px；
}
#名称p{
利润率：100px 500px 0.10%；
字体大小：59px；
字体系列：“安东”，“无衬线”；
最大宽度：500px；
}



拉里·罗森伯格

希望这就是你想要实现的目标

请尝试一下下面的代码片段

#图像容器{
高度：500px；
位置：固定；
宽度：100%；
}
#形象{
宽度：100%；
身高：100%；
位置：相对位置；
}
#图像img{
浮动：对；
}
#名称容器{
位置：相对位置；
}



嗨，我是尼希莱什

它不适用于我的标题。有没有办法调整边距来定位它们？你的头球在哪里？“他们”是谁？这里是一切：不要那样做。删除两条评论，并将代码添加到原始问题中。如果您需要我查看您的标题图像，那么您还必须将其托管在某个位置或上载到SO。同时上载您的图像，以便我可以查看并自定义答案。

#logo_picture{
    margin-left: 80px;
}

#logo img, #logo nav{
    float: left;
}
#logo nav{
    line-height: 120px;
    margin-left: 250px;
}
nav ul{
    list-style: none;
    margin: 0 10px;
    padding: 0;

}

nav li{
    display: inline;
}

nav a{
    color: black;
    font-size: 20px;
    font-family:'Arsenal', 'sans-serif';
    font-weight: 300;
    padding: 2px 38px;
    text-decoration:none;
}

nav a, nav a:visited {
    color: black;
}

nav a.selected, nav a:hover{
    color: grey;
}


    #name{
        margin: 100px 500px 0 10%;
        font-size: 59px;
        font-family: 'Anton', 'sans-serif';
        float: left;
        max-width: 500px;

    }

    #profile-pic{
        margin: 0;
        padding: 0;
    }