繁体   English   中英

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

[英]How do I place the image next to the text without exceeding the screen?

这是我需要嵌入网站的图片! 我正在尝试将图片放置在文本旁边,但是我不知道如何调整页边距以使文本浮动到左侧而不在其旁边留出较大的空白。 另外,可能是因为图片太大,导致网页不断超出屏幕区域,浏览器向我下方滚动条。 我该如何解决?

我希望它看起来像这个网站: http : //alexbudak.com/#first

这是我的代码:

    <!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>

这是CSS:

#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;
    }

实际上,最好的解决方案是将图像设置为父元素的背景。

您发送的示例链接通过包含img元素但隐藏了该元素并使用src属性来进行一些处理。

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

 #name{ background: url(https://static1.squarespace.com/static/541ff355e4b03f1e8815bc58/t/55c0b5abe4b0ec33f39abc7e/1438692796595/Try+1.jpg); background-size: cover; background-position: 50% 40%; height: 300px; } #name p{ margin: 100px 500px 0 10%; font-size: 59px; font-family: 'Anton', 'sans-serif'; max-width: 500px; } 
 <div id="name"> <p> Larry Rosenburg </p> </div> 

希望这是您想要实现的目标。

请尝试以下片段。

 #imageContainer { height: 500px; position: fixed; width: 100%; } #image { width: 100%; height: 100%; position: relative; } #image img { float: right; } #nameContainer { position: relative; } 
 <div id="imageContainer"> <div id="image"> <img src="http://www.mobileswall.com/wp-content/uploads/2015/12/300-Merry-Christmas-Minions-l.jpg"></img> </div> </div> <div id="nameContainer"> <p> Hi i'm Nikhilesh </p> </div> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM