css - 如何避免元素重叠？我尝试以百分比设置宽度并使用显示 :block

Question

每次我想缩小浏览器窗口时都会出现重叠，因此页面在移动设备上看起来很糟糕。我尝试将宽度设置为百分比，并将重叠元素的显示属性设置为“阻止”，但问题仍然不会消失。无论我做了什么，.third-div-welcome-section 元素仍然被 #projects 和元素 .second-div-welcome 中的文本重叠-section 正在离开它的容器。

#welcome-section {
  position: relative;
  top: 50px;
  margin: 30px;
  height: 580px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.first-div-welcome-section {
  background-color: rgba(255, 255, 204, 0.7);
  border-radius: 30px;
  padding: 30px;
  display: block;
  height: 110%;
  width: 25%;
}

.second-div-welcome-section {
  background-color: rgba(255, 255, 204, 0.7);
  border-radius: 30px;
  padding: 30px;
  display: block;
  margin-left: 30px;
  width: 25%;
  height: 110%;
}

.third-div-welcome-section {
  background-color: rgba(255, 255, 204, 0.7);
  border-radius: 30px;
  padding: 30px;
  display: block;
  margin-left: 30px;
  width: 25%;
  height: 110%;
}

#projects {
  background-color: #006400;
  background-image: linear-gradient(to bottom, rgba(0, 133, 20, 1), rgba(39, 225, 20, 1));
  color: white;
  transform: translate(0, 60%);
  padding: 30px;
  width: 100%;
  height: 240px;
  display: inline-block;
}

#projects h1 {
  text-align: center;
}

.project-tile {
  display: block;
  float: left;
  text-decoration: none;
  color: black;
  font-weight: bold;
  margin-left: 25px;
}

.project-tile:hover {
  border: 3px solid blue;
  background-color: blue;
  color: white;
  text-decoration: none;
}

<section id="welcome-section">
  <div class="first-div-welcome-section">
    <img src="pics/me.jpg" alt="mypic" width="230px" height="290px">
    <h1>Hi. I'm Cristian Antonescu.</h1>
    <p><i class="fa fa-briefcase"></i> Front-end web developer</p>
    <p><i class="fa fa-home"></i> Romania, Marasesti city</p>
    <p><i class="fa fa-envelope"></i> cristian_antonescu1992@yahoo.com</p>
  </div>
  <div class="second-div-welcome-section">
    <h3><i class="fa fa-drivers-license" style="font-size:24px"></i> Skills:</h3>
    <ul>
      <li>JavaScript</li>
      <li>CSS3</li>
      <li>HTML5</li>
      <li>jQuery</li>
      <li>Never ending ambition</li>
    </ul>
    <h3><i class="fa fa-anchor" style="font-size:24px"></i> My Journey:</h3>
    <p>I began my web development journey mostly as a self-taught who has been learning the basics of HTML and CSS from <a href="http://w3schools.com">w3schools</a> and <a href="http://freecodecamp.com">freeCodeCamp</a> . I also participated in a online
      course where I improved a lot my web development skills, entering the wonderful realm of JavaScript.</p>
    <p>What motivated me? My main motivation was and still is to create useful and well-designed webpages and apps which can improve and entertain peoples' lives, although I have to admit that I started to learn HTML not having any idea about how much beauty
      and addiction it can bring into my life. It was more like "Well I have some working neurons in my head, what can I do with them? Let's try programming and see where it goes!"</p>
  </div>
  <div class="third-div-welcome-section">
    <h3><i class="fa fa-graduation-cap" style="font-size:24px"></i> Education:</h3>
    <h5 class="w3-opacity"><b>Front End Developer / w3schools.com:</b></h5>
    <p class="w3-text-teal"><i class="fa fa-calendar"></i> Jan 2016 - <span>Current</span></p>
    <p>There's a never ending phase when it comes to learning programming! I'm always eager to improve my skills!</p>
    <h5 class="w3-opacity"><b>Front End Developer / freeCodeCamp.com:</b></h5>
    <p class="w3-text-teal"><i class="fa fa-calendar"></i> Feb 2017 - <span>Current</span></p>
    <p>I've done a lot of the demanded projects and exercises available on freeCodeCamp!</p>
  </div>
</section>
<section id="projects">
  <h1 class="some-heading">Check out some of my work:</h1>
  <a href="https://github.com/cristopher927/motivational-web-app" class="project-tile" target="_blank">
    <img src="pics/quote-generator.jpg" alt="quote generator app pic" width="180px" height="155px"><br>Quote generator app
  </a>
  <a href="https://github.com/cristopher927/technical-documentation-page-about-JavaScript" class="project-tile" target="_blank">
    <img src="pics/documentation_page.png" alt="documentation page pic" width="250px" height="155px"><br>Documentation page about JavaScript
  </a>
  <a href="https://github.com/cristopher927/tribute-page-to-Max-Tegmark" class="project-tile" target="_blank">
    <img src="pics/tegmark.png" alt="tribute-page-to-Max-Tegmark pic" width="250px" height="155px"><br>Tribute page to Max Tegmark
  </a>
  <a href="https://github.com/cristopher927/Survey-about-the-web" class="project-tile" target="_blank">
    <img src="pics/web.png" alt="Survey about the web pic" width="250px" height="155px"><br>Survey about the web
  </a>
</section>

Answer 1

改善移动设备外观的最简单方法是通过 CSS3 @media query .这允许您为特定设备尺寸设置特定于移动设备的 CSS(在下面的示例中，任何小于 iPad 纵向宽度或 768 像素宽的东西)。

我已经注释掉了一些不需要的固定宽度/高度(这允许浏览器根据需要扩展内容，而不会显示过多的空间或内容被剪裁)。 @media 查询使用 flex-direction 将第一行更改为一列，并对个人的 margin 设置进行了一些小调整面板。

希望这有助于您开始针对移动设备优化网站!

#welcome-section {
    position: relative;
    top: 50px;
    margin: 30px;
    /*height: 580px;*/
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.first-div-welcome-section {
    background-color: rgba(255, 255, 204, 0.7); 
    border-radius: 30px;
    padding: 30px;
    display: block;
    /*height: 110%;
    width: 25%;*/
}

.second-div-welcome-section {
    background-color: rgba(255, 255, 204, 0.7); 
    border-radius: 30px;
    padding: 30px;
    display: block;
    margin-left: 30px;
    /*width: 25%;
    height: 110%;*/
}

.third-div-welcome-section {
    background-color: rgba(255, 255, 204, 0.7); 
    border-radius: 30px;
    padding: 30px;
    display: block;
    margin-left: 30px;
    /*width: 25%;
    height: 110%;*/
}

#projects {
    background-color: #006400;
    background-image: linear-gradient(to bottom, rgba(0, 133, 20, 1), rgba(39, 225, 20, 1));
    color: white;
    transform: translate(0, 60%);
    padding: 30px;
    width: 100%;
    height: 240px;
    display: inline-block;
}

#projects h1 {
    text-align: center;
}

.project-tile {
    display: block;
    float: left;
    text-decoration: none;
    color: black;
    font-weight: bold;
    margin-left: 25px;
}

.project-tile:hover {
    border:3px solid blue;
    background-color: blue;
    color: white;
    text-decoration: none;
}

@media only screen and (max-width: 767px) {
  #welcome-section {
    flex-direction: column;
    margin: 0;
  }
  
  .second-div-welcome-section,
  .third-div-welcome-section {
    margin-left: 0;
    margin-top: 20px;
  }
}

<section id="welcome-section">

            <div class="first-div-welcome-section">
                <img src="pics/me.jpg" alt="mypic" width="230px" height="290px">

                <h1>Hi. I'm Cristian Antonescu.</h1>

                <p><i class="fa fa-briefcase"></i> Front-end web developer</p>
                <p><i class="fa fa-home"></i> Romania, Marasesti city</p>
                <p><i class="fa fa-envelope"></i> cristian_antonescu1992@yahoo.com</p>

            </div>

            <div class="second-div-welcome-section">
                <h3><i class="fa fa-drivers-license" style="font-size:24px"></i> Skills:</h3>

                <ul>
                    <li>JavaScript</li>
                    <li>CSS3</li>
                    <li>HTML5</li>
                    <li>jQuery</li>
                    <li>Never ending ambition</li>
                </ul>

                <h3><i class="fa fa-anchor" style="font-size:24px"></i> My Journey:</h3>

                <p>I began my web development journey mostly as a self-taught who has been learning the basics of HTML and CSS from <a href="http://w3schools.com">w3schools</a> and <a href="http://freecodecamp.com">freeCodeCamp</a> . I also participated in a online course where I improved a lot my web development skills, entering the wonderful realm of JavaScript.</p>
                <p>What motivated me? My main motivation was and still is to create useful and well-designed webpages and apps which can improve and entertain peoples' lives, although I have to admit that I started to learn HTML not having any idea about how much beauty and addiction it can bring into my life. It was more like "Well I have some working neurons in my head, what can I do with them? Let's try programming and see where it goes!"</p>

            </div>

            <div class="third-div-welcome-section">
                <h3><i class="fa fa-graduation-cap" style="font-size:24px"></i> Education:</h3>

                <h5 class="w3-opacity"><b>Front End Developer / w3schools.com:</b></h5>
               <p class="w3-text-teal"><i class="fa fa-calendar"></i> Jan 2016 - <span>Current</span></p>

               <p>There's a never ending phase when it comes to learning programming! I'm always eager to improve my skills!</p>

               <h5 class="w3-opacity"><b>Front End Developer / freeCodeCamp.com:</b></h5>
               <p class="w3-text-teal"><i class="fa fa-calendar"></i> Feb 2017 - <span>Current</span></p>

               <p>I've done a lot of the demanded projects and exercises available on freeCodeCamp!</p>

            </div>

        </section>

        <section id="projects">

            <h1 class="some-heading">Check out some of my work:</h1>

                <a href="https://github.com/cristopher927/motivational-web-app" class="project-tile" target="_blank">

                        <img src="pics/quote-generator.jpg" alt="quote generator app pic" width="180px" height="155px"><br>Quote generator app

                </a>

                <a href="https://github.com/cristopher927/technical-documentation-page-about-JavaScript" class="project-tile" target="_blank">

                        <img src="pics/documentation_page.png" alt="documentation page pic" width="250px" height="155px"><br>Documentation page about JavaScript

                </a>

                <a href="https://github.com/cristopher927/tribute-page-to-Max-Tegmark" class="project-tile" target="_blank">

                        <img src="pics/tegmark.png" alt="tribute-page-to-Max-Tegmark pic" width="250px" height="155px"><br>Tribute page to Max Tegmark

                </a>

                <a href="https://github.com/cristopher927/Survey-about-the-web" class="project-tile" target="_blank">

                        <img src="pics/web.png" alt="Survey about the web pic" width="250px" height="155px"><br>Survey about the web

                </a>

        </section>