Question

我目前有一个我正在处理的网站（将另一个网站复制为练习）

这是我尝试重新创建的网站 http://www.north2.net/

我差不多完成了，但我不能 正确定位两个侧面部分（主图像的左右两侧） 。

任何人都可以帮助我吗？

我有3＆＃34;部分＆＃34; left，middle，right，all都在一个包装器中

我已经尝试了

上边距，删除包装器上的内联块

...

我的目标：

能够根据自己的喜好举起两个侧边栏，但我不知道如何以任何方式举起它们。 north2.net看看我的意思。

的jsfiddle http://jsfiddle.net/abXk4/

不重要:: 此外，当我放置任何东西时，我的背景图像移动并且页面底部有一个白色间隙，我的屏幕是1920 x 1080，所以任何调整都会产生一个空白区域，我一直在修这个 padding-bottom：X％;

这只是我必须做的事情吗？或者是因为我编码不正确。

HTML

    <title> ENTER TITLE </title>

    </head>


    <body>

    <div id='page'> 
<!--All of Left Side Bar Contents -->

<div class="swrap">     
 <div id="logo">
        <img src="img/logo_green.png">
        </div>



    <div id="about">
    <aside class="tlb"><p>About Us</p></aside>
        <p>Welcome. We are Author, nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat.</p>
        </div>

    <div id="services">
    <aside class="tlb"><p>Services</p></aside>  
        <ul>
        <li>Web Site Dev and Applications </li>
        <div class='hr'></div>  
        <li>CMS</li>
            <div class='hr'></div>
        <li>Digital Branding and Industry</li>
            <div class='hr'></div>
        <li>UI Design</li>
            <div class='hr'></div>
        <li>Social Media</li>
        <div class='hr'></div>
        <li>User Experience</li>
            <div class='hr'></div>
        <li>Creative Ingenuity</li>
        </ul>       </div>  

    </div>

<!-- Center Content ( main header, main image )     -->
    <div class="mwrap">

<!--        Main Nav Above Slider -->


            <nav class='mnav'>
     <ul>
         <li class="m1"><a href='#'>home</a></li>
         <li class="m2"><a href='#'>Author</a></li>
         <li  class="m3"><a href='#'>work</a></li>
         <li class="m4"><a href='#'>clients</a></li>
         <li class="m5"><a href='#'>contact</a></li>
            </ul>
     </nav>

        <div id="fimg">
        <img src="img/fumic_naslovna.jpg">
        </div>

        <div id="featart">
        <article>
        <h1>Lorem Ipsum</h1>
        <p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus. Aenean dignissim. Curabitur facilisis sem at nisi laoreet placerat. Duis sed ipsum ac nibh mattis feugiat. Proin sed purus. Vivamus lectus ipsum, rhoncus sed, scelerisque sit amet, ultrices in, dolor. Aliquam vel magna non nunc ornare bibendum. Sed libero. Maecenas at est. Vivamus ornare, felis et luctus dapibus, lacus leo convallis diam, eget dapibus augue arcu eget arcu.</p>
        </article>
        </div>
        </div>

        <div id="rwrap">
        <div class="rfc">
            <aside class="tlb">Featured Clients</aside>
            <p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus.</p>
            <div class='hr'></div>
            <p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat.</p>
            </div>

        </div>
        </div>
</body>
</html>

CSS

body {
background-image: url(img/brown.jpg);   
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
padding-bottom:12%;
color: #fff;
    font-weight: bold;
    font-size: large;
    text-align: left;
}

* {
border-radius: 1px; 
}

#page {

margin: 30px 25%;
width: auto;
/*  width should be 50% ... 25% on each side, 50% in middle, centered!*/
border: 2px solid black;    
}


/*Left Content Begins ------------------ */

.swrap {
    width: 23%;
    display:inline-block;
/*1% margin on each side    */
    margin-top: 100px;
}

#logo {
background-color: rgba(0,0,0,.7);   
}

#about {
margin: 3px 0;  
background-color: rgba(89, 194, 141, 1);
padding: 5%;    
}

#about aside {
margin-left: -6% !important;    

}

#services {
background-color:rgba(66, 161, 75, .96);
padding: 2%;
    margin: 3px 0;  
}

.tlb {
background-color: rgba(0,0,0,.6);
width: 75%;
margin: -10px 0 0 -2% !important;
padding-left: 4%;
}

/*Middle Content Begins ------------------ */

.mwrap {
    width: 48%; 
    margin: 0 auto;
/*1% margin on each side for .mwrap*/
    display:inline-block;

}


.mnav ul {
list-style:none;    

}

.mnav ul li {
display: inline;
font-size: large;
font-weight:bold;
padding: 2px 2%;
border-radius: 1px;

}

.mnav ul li a {
text-decoration: none;
color: #fff;

}

.m1 {background-color:rgba(46, 206, 87, 1); }
.m2 {background-color: rgba(39, 197, 80, 1); }
.m3 {background-color: rgba(70, 182, 99, 1); }
.m4 {background-color: rgba(64, 164, 90, 1);}
.m5 {background-color: rgba(63, 140, 83, 1); }

.mnav ul li:active {
background-color:none !important;   

}

.mnav li:hover {
background-color: rgba(0,0,0,.3);

}

#fimg {
width: 100%;    

}
#fimg img {
width: 100%;    
}

#featart {
margin-top: -10px;  
background-color:   rgba(64, 164, 90, .9);
padding: 1% 1%;     

}


/*Right Content Begins ------------------ */

#rwrap {
width: 23%;
display:inline-block;   
/*1% margin on each side    */

}


.rfc {
    background-color:rgba(66, 161, 75, .96);
padding: 2%;


}

.rfc .tlb {
margin-top: 9px !important; 
margin-left: -2.3% !important;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}

Answer 1

简单的方法是使用位置相对position: relative; bottom: [how ever many pixels] 更好（后来更灵活）的方法是稍微改变HTML结构。如果我正在建立这个网站，我会把它分成两个包装div，每个下面有三个列div，就像这里一样：

 <div class="header">
      <div class="left-column">
           <img id="logo" src="img/logo.png" />
      </div>
      <div class="middle-column">
           <ul class="nav"></ul>
      </div>
      <div class="right-column">
           Put content here if you want it
      </div>
 </div>

 <div class="content">
      <div class="left-column">
           Content in left column
      </div>
      <div class="middle-column">
           Content in middle
      </div>
      <div class="right-column">
           Content on right
      </div>
 </div>

现在，使用CSS来浮动这些列，就像之前一样。与此不同的是，您可以定义标题的高度，徽标和导航将更容易对齐，因为它们与其他列分开。

如果您想获得更多技术检查CSS Flexbox，它可以在这里运作良好。 http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/

Answer 2

组职位：亲属; bottom：X px;

将整个包装器（div）定位在主包装器（div）内

2 个答案: