如何在不超出屏幕的情況下將圖像放置在文本旁邊？

Question

這是我需要嵌入網站的圖片！ 我正在嘗試將圖片放置在文本旁邊，但是我不知道如何調整頁邊距以使文本浮動到左側而不在其旁邊留出較大的空白。 另外，可能是因為圖片太大，導致網頁不斷超出屏幕區域，瀏覽器向我下方滾動條。 我該如何解決？

我希望它看起來像這個網站： 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;
    }

Answer 1

實際上，最好的解決方案是將圖像設置為父元素的背景。

您發送的示例鏈接通過包含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>

Answer 2

希望這是您想要實現的目標。

請嘗試以下片段。

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

如何在不超出屏幕的情況下將圖像放置在文本旁邊？

問題描述

2 個解決方案

解決方案1
0 2017-01-20 20:31:32

解決方案2
0 2017-01-20 20:38:13

如何在不超出屏幕的情況下將圖像放置在文本旁邊？

問題描述

2 個解決方案

解決方案1 0 2017-01-20 20:31:32

解決方案2 0 2017-01-20 20:38:13

解決方案1
0 2017-01-20 20:31:32

解決方案2
0 2017-01-20 20:38:13