使用flex

时间：2018-02-08 03:57:01

标签： html css flexbox

我是一个相对较新的编码场景，我正在尝试创建我的第一个响应式网站。当宽度足够大时，页面看起来很好。但是，当我在移动设备上测试它或调整到非常小的屏幕宽度时，＆＃34;描述＆＃34; div重叠到＆＃34; profile pic＆＃34;。有没有办法防止这种情况发生？我过去三天一直在努力，但无济于事。在这里试试我的运气。

这是我的代码。

＆＃13;
＆＃13; 
html, body {
  height: 100%;
  width: 100%;
  font-family: 'Lora', serif;
  background-color: lightgray
}

#navBarContainer {
  height: 15%;
  width: 100%;
  display: flex;
  align-items: center;
}

#contentPage {
  display: flex;
  height:75%;
  width: 100%;
  justify-content: center;
}

#container {
  height: 100%;
  width: 55%;
  display: flex;
}

#profilePicContainer {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  position: relative;
}

img {
  display: inline-block;
  height: 70%;
  border-radius: 200%;
  position: absolute;
  max-width: 100%;
  max-height: 100%;
}

#image {
  display: inline-block;
  height: 100%;
  width: 70%;
  border-radius: 200%;
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  background-color: black
}

#description {
  height: 100%;
  width: 100%;
  margin-left: 2%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

#CoverPageName {
  margin-left: 25%;
  font-size: 200%
}

#navBarLinks {
  margin-left: 10%;
  display: flex;
  justify-content: space-around;
  width: 25%;
}

a {
  color: black;
  text-decoration: none;
}

#navBarFont {
  font-size: 150%
}

#navBarFont:hover {
  transition: 0.2s;
  color: white
}

#helloFont {
  text-align: center;
  font-size: 400%
}

#circlesContainer {
  height: 30%;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.circles {
  height: 100%;
  width: 30%;
  border-radius: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 150%
}

#firstCircle {
  background-color: #BFFCE7;
}

#firstCircle:hover {
  background-color: #62B2C7;
  transition: 0.3s
}

#secondCircle {
  background-color: #F2D387;
}

#secondCircle:hover {
  background-color: #C7AD6F;
  transition: 0.3s
}

#thirdCircle {
  background-color: #FC4245;
}

#thirdCircle:hover {
  background-color: #C71B36;
  transition: 0.3s
}

#personalSummary {
  font-size: 125%
}



@media(max-width: 768px) {

  #navBarContainer {
    flex-direction: column;
  }

  #navBarLinks {
    width: 100%
  }

  #CoverPageName {
    margin-left: 0
  }

  #navBarLinks {
    margin-left: 0
  }

  #contentPage {
    height: 100%
  }

  #container {
    width: 100%;
    flex-direction: column;
  }

  #profilePicOuterContainer {
    margin: 0 auto
  }

  #description {
    margin: 0 auto
  }

  img {
    height: 450px
  }

  #circlesContainer {
    display: none;
  }

}
＆＃13; 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Portfolio website</title>
    <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">

  </head>
  <body>
    <div id ="navBarContainer">
      <a id="CoverPageName" href="index.html">NAME</a>

      <div id="navBarLinks">
        <a id="navBarFont" href="education.html">Education</a>
        <a id="navBarFont" href="experience.html">Experience</a>
        <a id="navBarFont" href="skills.html">Skills</a>
      </div>
    </div>

    <div id="contentPage">
      <div id="container">

          <div id="profilePicContainer">
            <div id="image"></div>
          </div>

        <div id="description">

          <h1 id="helloFont" >Hi there,</h1> 

          <div id="circlesContainer">
            <a class="circles" id="firstCircle" href="education.html">Education</a>
            <a class="circles" id="secondCircle" href="experience.html">Experience</a>
            <a class="circles" id="thirdCircle" href="skills.html">Skills</a>
          </div>

          <p id="personalSummary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>

      </div>
    </div>

  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

问题在于你宣称这两个元素都是容器的100％高度......这没有任何意义，因为这相当于200％。

所以摆脱高度声明，并在flex:1 1 auto;上使用#profilePicContainer，这样他们就可以计算出某种有意义的东西。

答案 1 :(得分：-1)

欢迎乘坐！如果您不熟悉编程，我建议您从右脚开始忘记id以及您使用HTML5元素：

<nav class="main-menu">
    <ul class="item-list">
        <li class="item">
            <a class="link" href="#">
                <span>Home</span>
            </a>
        </li>

        <li class="item">
            <a class="link" href="#">
                <span>Thing A</span>
            </a>
        </li>

        <li class="item">
            <a class="link" href="#">
                <span>Thing B</span>
            </a>
        </li>
    </ul>
</nav>

<main class="page-content">
    <figure class="image">
        <img src="https://placehold.it/400" alt="" />
    </figure>

    <section class="description">
        <header>
            <h1 class="welcome-message">Hi there</h1>
        </header>

        <aside class="circles">
            <ul class="item-list">
                <li class="item">
                    <a href="#" class="link">
                        <span>circle one</span>
                    </a>
                </li>

                <li class="item">
                    <a href="#" class="link">
                        <span>circle one</span>
                    </a>
                </li>

                <li class="item">
                    <a href="#" class="link">
                        <span>circle one</span>
                    </a>
                </li>
            </ul>
        </aside>

        <article class="story">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </article>
    </section>

</main>

就你的问题而言，很难说你想要发生什么。在jsFiddle中抛出代码如下所示：https://jsfiddle.net/kn26xL2e

我强烈建议您首先在小屏幕上编写媒体查询。

如果你解释一下它的外观，我们会更有帮助。

body {
    margin: 0; /* remove default */
    background: lightgray;
}

a { /* good default links */
    display: block;
    text-decoration: none;
    color: inherit;
}

.item-list { /* remove list styles */
    list-style: none;
    margin: 0;
    padding: 0;
}

figure {
    margin: 0;
    padding: 0;
}

figure img { /* responsive images */
    display: block;
    width: 100%;
    height: auto;
}


.main-menu {
    background: blue;
}

.main-menu .item-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between
    color: white;
}

.main-menu .item {
    flex-basis: 33%;
}

.main-menu .link {
    padding: 1rem;
    text-align: center;
}

.main-menu .link:hover {
    background: navy;
    color: pink;
}

.page-content {
    border: 1px solid lime;
    padding: 1rem;
}

.page-content .image {
    max-width: 300px;
}

.circles .item-list {
    display: flex;
    flex-direction: row;
}

.circles .link {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: yellow;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

@media (min-width: 700px) {
    .page-content {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .page-content .image {
        flex-basis: 300px;
        flex-shrink: 0; /* no */
    }

    .page-content .description {
        padding-left: 2rem;
    }
}

https://codepen.io/sheriffderek/pen/EQNGVw

相关问题
最新问题