如何解决即使添加了clear:right
我正在网站的移动设备视图上工作。我在联系页面上。礼物图像(这是一个可单击的链接)在右侧进入我的联系信息时,即使我将左侧边距设置为0,左侧的间隙也很大。文本。
此外,我遇到了一个问题,应该放在标题下面的文本崩溃到其中,而有些却在标题上方和部分下方。我为每个段落添加了单独的ID,并为每个有效的段落添加了上边距,但是我敢肯定,必须有一种更有效的方式来处理此问题。如果有的话,我将不胜感激学习更好的方法。
您会注意到一个上边距设置为100px,另两个上边距设置为120px。出于某种原因,每一行都可以在下方找到文本。
礼物图片的原始尺寸为: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">99100@email.com</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 举报,一经查实,本站将立刻删除。