В моем классе веб-дизайна мы делаем наши резюме из кода.Мой просто закончен, я просто не понимаю, как предотвратить столкновение моих коробок и испортить конфигурацию, когда я минимизирую экран (просто перейдите на http://andrewbrhoades.com/resume.html и попробуйте уменьшить размер экрана. Я не уверенесли это из-за того, что у меня несколько значений ширины, поплавка или чего-то еще.
Я пытался изменить ширину / поплавок моих секций, позиционирование относительно, статическое, абсолютное, изменение высоты и т. д.
HTML:
<header>
<h1><br>Andrew Brian Rhoades</h1>
<div id="statement">
<section class="professionalstatement">
<h2>Professional Statement</h2>
<p class="statement">My name is Andrew Rhoades, and I'm a writer and journalist. My desire for finding and delivering both the news that people deserve is why I've decided to pursue a career in journalism. It's a human right to be aware of what is occuring in the world around you. It may seem cliche to say something like that, but it is nothing but the truth. People also deserve solid all-around reporting as well. It's a continually challenging field in this day and age, as it requires diligence, determination, and wit, among numerous other abilities. It can be dangerous and take a toll on people. <a href="https://www.adweek.com/digital/quotes-inspire-journalists/">As Horace Greely says</a>, "Journalism will kill you, but it will keep you alive while you're at it." As intimidating as it can be persistence always prevail in the end. As for me, I feel I possess all of those skills and more to suceed. In addition, writing has always been a love of mine, and I always try my best to improve and strive to be better, to aim higher. I think that's the most successful attitude a young writer can have, and I'm excited to see where my path leads me.I know I can make an impact in today's media.<br/>
<br/>I've already gained much experience with journalism. I've been able to have the opportunity to write for the school newspaper, both at the high school and college level. Furthermore, I received an internship to write at Phillies Nation, a Philadelphia Phillies-oriented blog that has allowed me to work with writers in positions I hope to achieve some day. It's motivating, and gives me a great chance to continune to learn my craft.<br/>
<br/>I also enjoy photography and social media. I believe they are just as important as writing, and today's journalists would be well off having a deep knowledge of the three. I live in Thorndale, PA, and in my free time I enjoy bike rides and volunteering at a local animal shelter.</p>
<br/>
<img src="me.jpg" alt="Personal Picture" width="200" height="300">
</section>
</div>
</header>
<div id="resume">
<section class="education">
<h3>Education</h3>
<p class="bishopshanahan"><b>Bishop Shanahan High School, Downingtown, PA</b><br/>August 2012 - May 2016</p>
<br/><p class="cu"><b>Cabrini University, Radnor, PA</b><br/>Bachelor in Communications, August 2016 - May 2017<br/>GPA: 3.44/4.0</p>
<br/><p class="sju"><b>Saint Joseph's University, Philadelphia, PA</b><br/>Bachelor in Communications, August 2017 - Present<br/>GPA: 3.36/4.0</p>
</section>
<section class="journalism">
<h4>Journalism Experience</h4>
<p class="philliesnation"><i>Sports Writer</i><br/>Phillies Nation Blog, https://www.philliesnation.com, 2018 - Present</p>
<ul>
<li>Worked as an unpaid intern in the fall of 2018 and winter/spring of 2019</li>
<li>Tasks included researching and writing a variety of articles, such as series previews, news, rumours, and analysis.</li>
<li>Worked with sites such as Wordpress.</li>
<li>Demonstrated my ability to be a quick learner and analytical minded, as well as improving social media and technology skills.</li>
<li>Improved personal skills such as time-management, efficiency, flexibility, and communication.</li>
</ul>
<p class="hawk"><i>Sports Writer</i><br/>Saint Joseph's University, Philadelphia, PA, 2017 - Present</p>
<ul>
<li>Covered Saint Joseph's sports teams like cross country, basketball, men's soccer, and club field hockey, as well as club sports.</li>
<li>Wrote a wide variety of articles, from profiling certain players such as captains to recapping games and meets.</li>
<li>Gained experience from interviewing players and coaches, as each article requires two sources to have quotes from.</li>
<li>Improved my writing skills and personal skills like time-management and scheduling for articles, as well as other abilities such as observing and critical thinking.</li>
</ul>
</section>
<section class="experience">
<h5>Work Experience</h5>
<p class="falls"><i>Cashier</i><br/>Boulder Falls Miniature Golf, Downingtown, PA, 2015 - 2016</p>
<ul>
<li>Handled duties such as sweeping, working at the register, cleaning the ponds, blowing leafs, and fixing tables.</li>
<li>Built relationships with customers who played often at the course as well as the people I worked with and my employers.</li>
<li>Grew skills such as time managing, quality customer service, and accountability.</li>
<li>Received a raise my last summer there based on my performance.</li>
</ul>
<p class="karens"><i>Dog Daycare Staffer</i><br/>Karen's K-9 Care, Frazer, PA, 2018 - Present</p>
<ul>
<li>Worked as a staffer in the yard where dogs were held for daycare.</li>
<li>Worked 6 hours starting at 6am 4 days a week, and occasionally 10 hours on weekends.</li>
<li>Tasks included picking up dog poop, filling up dog bowls, bringing in dogs to the yard from the parking lot, cleaning/vacuuming crates and other areas of kennel, and washing dog bowls.</li>
<li>Improved skills such as teamwork, responsibility, reliability, and work ethic.</li>
</ul>
</section>
<section class="addexperience">
<h6>Additional Experiences and Activities</h6>
<p class="xc"><i>Cross Country Runner</i><br/>Cabrini University, Wayne, PA, 2016</p>
<ul>
<li>Recruited by the coach on the first day of the semester after he spotted me running.</li>
<li>Trained for meets at least 4 days a week with my teammates, which included runs anywhere from 30 to 60 minutes.</li>
<li>Competed in 8 cross country meets, one in Princeton against Division 1 teams.</li>
<li>Improved my conference race time from 40 minutes to 35 minutes, despite challenging obstacles the course presented.</li>
<li>Named to the conference all-academics and all-sportsmanship teams.</li>
</ul>
<p class="stagecrew"><i>Stage Crew/Special Effects Manager</i><br/>Bishop Shanahan High School, Downingtown, PA, 2012 - 2015</p>
<ul>
<li>Served on my high school's stage crew for all 4 years, demonstrating skills such as reliability, creativity, etc.</li>
<li>Performed special effects from sophomore year onward, learning from my special effects manager.</li>
<li>Promoted to special effects manager senior year.</li>
<li>Mentored underclassmen on various special effects, such as a fog machine and lighting, leaving an impression on them on how to succeed.</li>
</ul>
<p class="volunteer"><i>Volunteer</i><br/>Lamancha Animal Rescue, Coatesville, PA, 2017 - Present</p>
<ul>
<li>Worked with experienced volunteers, and helped walk, feed, and socialize with the dogs.</li>
<li>Also performed manual labor such as filling in dog kennels, fixing and washing down the dog beds, and various other tasks.
<li>Experienced working with others in a more relaxed environment, and worked on personal skills such as quick thinking, diligence, and problem solving.</li>
</ul>
</section>
<section class="resreflections">
<a href= "reflections.html">Reflections</a>
</section>
</div> <!-- end resume -->
<div class="clear"></div>
</div> <!-- end content-->
</body>
</html>
CSS:
@media screen and (min-width: 1024px) { /* computer widescreen view */
body{
text-align: center;
}
#content{
max-width: 1100px;
margin: auto;
}
#statement {
float: left;
width: 48%;
}
#resume {
float: right;
width: 48%;
}
p.statement{
letter-spacing:.75em; /*12/16*/
font-size: .8125em; /*13/16*/
line-height: 1.5em; /*24/16*/
}
h1{
font-size: 3em; /*48/16*/
letter-spacing: .05em; /*0.8/16*/
line-height: 1em; /*16/16*/
margin-bottom: .50em; /*8/16*/
}
h2, h3, h4, h5, h6, h7{
font-size: 1.0625em; /*17/16*/
letter-spacing: .05em; /*8/16*/
line-height: .85em; /*13.6/16*/
margin-bottom: .10em; /*1.6/16*/
}
p{
font-size: .9375em; /*15/16*/
letter-spacing: .05em; /*8/16*/
line-height: 2em; /*32/16*/
}
li{
list-style-type: square;
font-size: .9375em; /*15/16*/
line-height: 1em; /*16/16*/
list-style-position: outside;
margin-left: 10px;
}
section.experience, section.journalism, section.addexperience, section.education{
text-align: center;
width: 80%;
height: auto;
padding: 35px;
margin-bottom: 10px;
}
section.resreflections{
font-size: 1.5625em; /*25/16*/
text-align: center;
width: 80%;
height: auto;
padding: 35px;
margin-bottom: 10px;
}
section.professionalstatement{
text-align: center;
width: 77%;
padding: 20px;
}
p.karens, p.philliesnation, p.stagecrew, p.volunteer, p.hawk{
margin-top: .75em; /*12/16*/
line-height: normal;
letter-spacing: normal;
}
p.xc, p.falls{
line-height: normal;
padding-top: 4px;
letter-spacing: normal;
}
p.cu, p.bishopshanahan, p.sju, p.statement{
letter-spacing: normal;
line-height: normal;
}
.clear{
clear: both; /* necessary for floating elements; do not remove */
}
Когда я сворачиваю экран, я ожидаю, что все разделы останутся на своих местах. Вместо этого только дваиз секций остаются на правой стороне, в то время как все остальные разделены (или внизу или на левой стороне, что они не должны, потому что у меня они плавающие справа).
Пример: