-1
我正試圖完成一個網頁設計項目，並且遇到元素彼此重疊的問題（請參閱附加的截圖）。 我的圖像應該填充在左邊，銀色文本框在右邊，圖像和框之間有一些空格。 下面這兩個元素應該是「博客」一詞，下面的一行應該是具有MEDLIFE祕魯服務學習之旅和lorem ipsum文本的文本框。組織HTML和CSS：元素互相重疊
附在下面是我的代碼：
CSS其次是HTML。
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400');
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t font-size: 100%;
\t font: inherit;
\t vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
\t display: block;
}
body {
\t line-height: 1;
}
ol, ul {
\t list-style: none;
}
blockquote, q {
\t quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
\t content: '';
\t content: none;
}
table {
\t border-collapse: collapse;
\t border-spacing: 0;
}
body{
background: #507A98;
}
a{
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition:.5s;
-webkit-transition: .5s;
transition: .5s;
text-decoration: none;
}
em{
font-style: oblique;
}
strong{
font-style: bold;
}
img{
width: 100%;
}
h1,h2,h3,h4,h5,p{
font-family: "Montserrat", sans-serif;
}
h3{
text-transform: capitalize;
font-size: 1.875em;
padding: 0 0 1% 0;
font-weight: 800;
color: #000000;
}
header{
background: url(../img/home-hero-image.jpg);
background-size: cover;
background-position: center center;
width: 100%;
}
.hero-image h1{
font-size: 6em;
text-align: center;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 800;
line-height: 1.5em;
}
.hero-image h2{
font-size: 2em;
text-align: center;
color: #ffffff;
font-weight: 400;
text-transform: capitalize;
letter-spacing: .09em;
}
.container{
max-width: 960px;
margin: 0 auto;
font-family: "Montserrat, sans-serif";
-webkit-animation-delay: 4s;
animation-delay: 2s;
}
.about-me{
padding: 4%;
}
.about-me p{
font-family: "Montserrat", sans-serif;
font-weight: 300;
line-height: 1.8;
color: #DCDCDC;
letter-spacing: .03em;
margin: 5px auto;
font-size: 1.2em;
padding: 2% 0;
}
.about-me p a{
color: #E1CCC9;
border-bottom: 2px solid;
}
.text-box-about-me{
float: left;
text-align: left;
width: 480px;
height: 100%;
background:silver;
}
.main-textbox-content{
padding: 4% 8%;
}
.main-textbox-content p{
line-height: 1.8;
letter-spacing: .03em;
font-size: 1em;
}
.image-area {
width: 240px;
height: 240px;
overflow: hidden;
border-color: bisque;
border-style: solid;
border-width: 3px;
}
.peru-blog{
height: 300px;
padding: 2% 0;
}
.peru-blog h3{
padding: 4% 0;
}
.full-textbox{
float: center;
text-align: left;
width: 480px;
background-color: #fff;
height: 100%;
}
.full-textbox-content{
padding: 4% 8%;
}
.full-textbox-content p{
line-height: 1.8;
color: #661166;
letter-spacing: .03em;
font-size: 1em;
}
.left{
float: left;
}
.right{
float: right;
}
.contact-me{
width: 100%;
padding: 5% 0;
margin-top: 5%;
clear: both;
}
.contact-me-content{
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.contact-me-content h4{
font-size: 1.2em;
padding: 1% 0;
color: #fff;
font-weight: 200;
letter-spacing: 0.04em;
}
footer{
background-color: #E0CCC8;
color: #fff;
padding: 2% 0;
width: 100%;
clear: both;
height: 100px;
}
.footer-content{
max-width: 960px;
padding: 2% 0;
margin: 0 auto;
font-family: "Montserrat", sans-serif;
font-weight: 300;
line-height: 1.4;
color: #011833;
letter-spacing: .03em;
font-size: 1em;
}
.copyright{
float: left;
}
.social-media{
float: right;
}
.social-media li{
display: inline;
}
.social-media li a{
color: #011833;
padding: 0.2em;
font-soze: 1.8em;
font-weight: 600;
}
.social-media li a:hover{
color: #fff;
}<!DOCTYPE HTML>
<html>
<head>
<title>Anutr Sivakoses | Personal Website</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<div class="hero-image">
<h1>Anutr Sivakoses</h1>
<h2>Student at the University of Nevada, Reno</h2>
</div>
</header>
<div class="container">
<section class = "about-me">
<div class="about-me-content">
<h3>Hey there, i'm anutr!</h3>
</div>
<div class="image-area left">
<img src="img/about-me-profile.jpg">
</div>
<div class=text-box-about-me>
<div class="main-textbox-content">
<p>lorem ipsum dolor</p>
</div>
</div>
</section>
<h3>Blog</h3>
<section class= "peru-blog">
<div class="full-textbox">
<div class="full-textbox-content">
<h3>MEDLIFE Peru Service Learning Trip</h3>
<p>lorem ipsum dolor sit amet.</p>
</div>
</div>
</section>
<section class="contact-me">
<div class="contact-me-content">
<h4>For any inquiries, please contact me at: <a class-"contact-me-email" href="mailto:[email protected]">[email protected]</a></h4>
</div>
</div>
<footer>
<div class="footer-content">
<p class="copyright">Copyright© 2017 Anutr Sivakoses</p>
<ul class="social-media">
<li>
<a href="#" target="_blank">Facebook</a>
</li>
<li>
<a href="#" target="_blank">Instagram</a>
</li>
<li>
<a href="#" target="_blank">LinkedIn</a>
</li>
</ul>
</div>
</footer>
</body>
</html>
請編輯的問題將其限制在有足夠細節的具體問題，以確定一個適當的答案。避免一次詢問多個不同的問題。請參閱[如何提問]（https://stackoverflow.com/help/how-to-ask）頁面以獲得澄清此問題的幫助。 – Rob