时间戳

首页 > 解决方案 > 我如何更好地设计关于我网站上的文本的代码，它总是与我的手机上的图片重叠，但在笔记本电脑上看起来不错

html - 我如何更好地设计关于我网站上的文本的代码，它总是与我的手机上的图片重叠，但在笔记本电脑上看起来不错

问题描述

大家好，我需要帮助找到解决文本问题的最佳方法，因为它在手机上看起来很难看，但在笔记本电脑上看起来还不错，因为我附上了笔记本电脑和手机的屏幕截图以解决文本重叠问题图像，在我
用来将文本移动到下一行的笔记本电脑中 我知道这不是最好的方法，但我找不到更好的方法 这是我的手机和笔记本电脑的屏幕截图 在此处 输入图像描述

以及网站html和css的代码

人物 
</head>
<body class ="background">
     <nav class = "navbar navbar-expand-md navbar-dark bg-dark border">
        <ul class = "navbar-nav mr-auto mt-2">

            <li class = "nav-item">
                <a id="navigation" class = "nav-link" href = "index.html">
                    Home
                </a>
            </li>

            <li class = "nav-item">
                <a id="navigation" class = "nav-link" href = "introduction.html">
                    Introduction
                </a>
            </li>

            <li class = "nav-item">
                <a id="navigation" class = "nav-link" href = "Characters.html">
                    Characters
                </a>
            </li>

            <li class = "nav-item">
                <a id="navigation" class = "nav-link" href = "bibliography.html">
                    Reference
                </a>
            </li>

        </ul>

    </nav>
    <main>
        <div class = "chr_text">

            <p>
                <h3 class ="underline">
                    Natsu Dragneel
                </h3>
                <img src ="natsu.jpg" alt="Natsu" class="move_right">
                Natsu is a Young man of average Height with a muscular body and slight Tan skin.<br> He has spiky pink- coloured hair and sharp canines. He is a Wizard in a guild <br> called Fairy tail, beside this he is also a member of Team Natsu. His magic <br> abilities include Fire Dragon  Slayer Magic, Natsu has adapted with his Fire Dragon <br> Slayer Magic to make use of it in  many combats. The heat of his fire can increase in <br> temperature, which is directly proportional to Natsu's emotional state. Natsu also <br> has the ability to eat flames give him immunity to most types of flames, including explosions <br> and allows him to Spew fire from his lungs
            </p>

        </div>
       <hr class ="line">

       <div class ="chr_text">
            <p>
                <h3 class ="underline">
                    Lucy Heartfilia
                </h3>
                <img src="lucy.jpg" alt="Lucy" class="move_right">

                Lucy Heartfilia is a fictional character and the protagonist of fairy tail manga created <br> by Hiro Mashima. Lucy uses magical objects known as Gatekeys to invite celestial <br> spirits, from another world that own varied capabilities, such as powerful zodiac spirits <br> that she invite with rare golden keys.She is the teenager debutante of the wealthy <br> Heartfilia family who tackle on a journey to join the Fairy Tail, which she fulfills <br> after Natsu Dragneel rescues her from a slave trader present as a Fairy Tail member <br> under his own pet name of "Salamander". She is also a pursuing novelist who <br> eventually publishes her launch novel based on her experiences at the guild at the end <br> of the series.

            </p>
       </div>
       <br>
       <br>
       <br>
       <hr class="line">
       <div class="chr_text">
           <p>
               <h3 class="underline">
                    Erza scarlet
               </h3>
               <img src ="erza.jpg" alt ="Erza" class="move_right">

               Erza is a young woman with long, scarlet hair and brown eyes. She lost her right eye <br> as a child and now has an artificial one which was created by Porlyusica. She has <br> a slender, voluptuous figure that Lucy Heartfilia described as "amazing." Her most <br> common attire consists of a custom-made armor by Heart Kreuz smiths, a blue skirt, <br>  black boots, and diamond shaped silver earrings. Her Fairy Tail stamp is blue and is <br>  located on the middle of her left upper arm .Erza's specialty in Requip Magic allows <br>  her to requip not only armors but different outfits as well, enabling her to change her <br> attire at any given time.

           </p>

       </div>
       <hr>

    </main>
</body>

标签： htmlcss

解决方案

删除<br>段落中的标签，因为它们标记了换行符的位置。相反，省略它们，HTML 中的文本会流动并适应浏览器窗口的形状。不仅适用于手机，还有小型笔记本电脑，甚至是用户将窗口并排放置的大屏幕。

如果你把你的<head>部分也可能：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

它将为您提供更自然的移动文本大小。

推荐阅读