Question

我无法将两个div相互对齐（.sidebar和.work-images），也无法使.projects-section的白色背景显示在图像上。我希望每个部分占用100vh所以这就是它必须的方式。

或者，如果你不明白，on the screenshot这三个占位符图像应该在蓝色侧边栏旁边，并且包含侧边栏和图像的整个div应该具有白色背景并且应该在图像。

我还将其上传到github但怀疑它会与屏幕截图一样好，因为它没有添加响应性。

＆＃13;

body {
     box-sizing: border-box;
}

* {
     font-size: 16px;
     font-family: Questrial, sans-serif;
     margin: 0;
     padding: 0;
}

/* About section */
.projects-section {
     height: 100vh;
}

#about {
     height: 100vh;
}

.background {
     width: 100%;
}

.about-heading {
     display: inline;
     background-color: rgba(0, 0, 0, 0.58);
     position: absolute;
     margin-top: 22.5%;
     margin-left: 65%;
     color: white;
     width: 25%
}

span#h1 {
     font-size: 5em;
}

.about-heading p {
     font-size: 1em;
     text-align: center;
     padding: 1%;
}


/* Projects section */

.sidebar {
     background-color: #22a7f0;
     text-align: center;
     display: inline-block;
     height: 100vh;
     width: 10%;
     position: relative;
}

.sidebar span {
     font-size: 5em;
     display: block;
     padding-top: .8em;
}

.sidebar a:link,
.sidebar a:visited {
     text-decoration: none;
     color: white;
}

p#descr {
     color: white;
     font-size: 1.25em;
     padding-top: 5em;
}

/* End of sidebar */
.work-images {
     width: 90%;
}

.projects-section {
     width: 100%;
     background-color: white;
     height: 100vh;
}

.work-images img {
     width: 25%;
     margin-left: 2.5%;
     margin-right: 2.5%;
     display: inline-block;
}

＆＃13;

<!doctype html>
<html>
     <head>
          <link href="main.css" type="text/css" rel="stylesheet">
          <title>Portfolio</title>
          <link rel="stylesheet" href="https://i.icomoon.io/public/temp/b907bd4c71/Navigationicons/style.css">
          <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
          <script>
             $(function() {
               $('a[href*="#"]:not([href="#"])').click(function() {
                 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                   var target = $(this.hash);
                   target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                   if (target.length) {
                     $('html, body').animate({
                       scrollTop: target.offset().top
                     }, 1000);
                     return false;
                   }
                 }
               });
             });
             </script>
     </head>

     <!-- About section -->
     <section id="about">
          <div class="about-heading">
               <p><span id="h1">Hi!</span><br>Some text here. <br>Some more text.</p>
          </div>
          <img src="images/pexels-photo-48637.jpeg" alt="Background image" class="background">
     </section>

     <!-- Projects section -->
     <section id="projects">
          <div class="projects-section">
               <div class="sidebar">
                         <a href="#about"><span class="icon-home-green"></span></a>
                         <a href="#projects"><span class="icon-projects-green"></span></a>
                         <a href="#"><span class="icon-skills-green"></span></a>
                         <a href="#"><span class="icon-contact-green"></span></a>
                         <p id="descr">My work</p>
               </div>

               <div class="work-images">
                    <img src="https://placeholdit.imgix.net/~text?txtsize=154&txt=PROJECT&w=1440&h=900&txttrack=0" alt="PROJECT">
                    <img src="https://placeholdit.imgix.net/~text?txtsize=154&txt=PROJECT&w=1440&h=900&txttrack=0" alt="PROJECT">
                    <img src="https://placeholdit.imgix.net/~text?txtsize=154&txt=PROJECT&w=1440&h=900&txttrack=0" alt="PROJECT">
               </div>
          </div>
     </section>

     <body>
     </body>
</html>

＆＃13;

Answer 1

通过将其添加到.projects.section div：

来修复它

 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 justify-content: space-between;

但仍未修复白色背景问题。

Answer 2

这是一个不好的做法，尝试使用bootstrap。但是，检查一下是否有帮助。

#projects * {
   display:inline;
}
#siderbar * {
   display: block!important
}

无法在图像上显示白色div，无法对齐两个div

2 个答案: