即使添加了clear：right

问题描述

@L_404_1@我正在网站的移动设备视图上工作。我在联系页面上。礼物图像（这是一个可单击的链接）在右侧进入我的联系信息时，即使我将左侧边距设置为0，左侧的间隙也很大。文本。

此外，我遇到了一个问题，应该放在标题下面的文本崩溃到其中，而有些却在标题上方和部分下方。我为每个段落添加了单独的ID，并为每个有效的段落添加了上边距，但是我敢肯定，必须有一种更有效的方式来处理此问题。如果有的话，我将不胜感激学习更好的方法。

您会注意到一个上边距设置为100px，另两个上边距设置为120px。出于某种原因，每一行都可以在下方找到文本。

这是在“自然主题” wordpress模板中完成的。

礼物图片的原始尺寸为：833✕715px

我正在尝试宽度：.vift的5vw，它似乎没有用。本质上，我想根据屏幕尺寸查看哪种方法最适合在页面上放置礼物图像。

先谢谢您。

/*Contact page*/
div#page-7.post-7.page div.postarea {
    background-image: url('https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-6/htmlcss1-img_tahoe.jpeg') !important;
    color: #C91216 !important;
    font-size: 24px;
    line-height: 27px;
}

div#page-7.post-7.page div.postarea h2 {
    color: #C91216;
    float: right;
    font-size: 40px;
    font-weight: bold;
}

div#page-7.post-7.page div.postarea .rightside {
    float: right;
    display: inline-block;
    text-align: right;
    clear: left;
}

div#page-7.post-7.page div.postarea h1 {
    float: right;
    clear: left;
    color: #FFEC6C !important;
    font-size: 70px !important;
}

.picjj {
    margin-top: 40px;
}

.feelfree {
    color: black !important;
    position: absolute;
    bottom: 520px;
    transform: rotate(-19deg);
    font-weight: bold;
    max-width: 300px;
    margin-left: 80px;
}

.gift {
    position: absolute;
    bottom: 200px;
    margin-left: 100px;
    transform: rotate(8deg);
}

#address1 {
    margin-top: 100px;
    clear: left;
}

#suite {
    clear: left;
}

#gmail {
    margin-top: 120px;
    clear: left;
}

#number {
    margin-top: 120px;
    clear: left;
}

.picjj {
    border: 20px solid;
    color: rgba(255,236,108,0.60);
}

@media screen (max-width: 320px) {
    div#page-7.post-7.page
                .gift {
        width: 5vw;
        margin-left: 0;
        bottom: 300px;
        float: left;
        clear: right;
        clear: bottom;
        clear: top;
        padding-left: 0;
    }
}

@media (max-width: 320px) {
    div#page-7.post-7.page .redheaders {
        font-size: 18px !important;
    }
}

@media (max-width: 320px) {
    div#page-7.post-7.page .feelfree {
        Bottom: 400px;
        float: left;
        margin-left: 0;
        max-width: 80px;
    }
}

<div class="contactpage">
  <div class="rightcontact"><h1 id="contactheader">Contact</h1>
  </div>        

<div class="profileimg">
<img class="picjj" src="https://s3.amazonaws.com/codecademy-content/courses/learn-html/elements-and-structure/profile.jpg" alt="Exmaple pic" width="216">
</div>

<div class="rightside">
<h2 class="redheaders">Mailing address</h2>
<p></p>
<p id="address1">12 Skip A Few Street</p>
<p id="suite">Suite 99,Toronto,Ontario</p>
<p id="postal">M5V 1B1</p>

<h2 class="redheaders">E-mail address</h2>
<p></p>
<p id="gmail">[email protected]</p>

<h2 class="redheaders">Phone number</h2>
<p></p>
<p id="number">123-456-7890</p>
</div>

  <div class="leftcontact">
<p class="feelfree">Feel free to check out my consumer page for fun gifts:</p>

 <a class="gift" href="https://teespring.com/stores/jjs-ts-and-stuff">
         <img src="https://www.freeimages.com/photo/present-1443957" alt="gift image for example" alt="pic for example" width="400" height="auto"><br style="clear:both;">
      </a>
</div>

</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-float html