将两个容器相互放置

Question

我有一些布局问题。

如果您查看 at the fiddle here，有两个容器，contentAbout 和 contentPortfolio。我的问题是我无法在彼此之间正确设置这些 div。之间总有一个space.

也许你可以给我一些提示来使它正常工作。

这是我的html

<div class="content">
    <div class="contentAbout">
        <p>TEXT</p>                        
    </div>
    <div class="contentPortfolio">
        <p>TEXT 2</p>
    </div>
</div>

这是我的 css

.image {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(35, 35, 35, .8)),
  url('../img/header-bg.jpg'),
  url('http://lorempixel.com/g/1200/1200');
  background-size: cover;
  background-repeat: no-repeat;
}

.image:after {        
  background: url('../img/bg-overlay.png') repeat;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0.7;
  z-index: 1;    
}

.content {
  position: absolute;
  top: 100%;
  width: 100%;
  height: 100%;
  background: rgb(25, 25, 25);
  border-top: 1px solid rgb(0, 0, 0);
}

.contentAbout {
  position: absolute;  
  width: 100%;
  background: rgb(255, 100, 50);
}

.contentPortfolio {
  position: absolute;
  width: 100%;
  background: rgb(20, 255, 25);
}

Answer 1

你的意思是这样？

.wrapper {
    max-width: 960px;
    margin: auto;
}

.image {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(35, 35, 35, .8)),
    url('../img/header-bg.jpg'),
    url('http://lorempixel.com/g/1200/1200');
    background-size: cover;
    background-repeat: no-repeat;
    
}

.image:after {        
    background: url('../img/bg-overlay.png') repeat;
    content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 top: 0;
 opacity: 0.7;
 z-index: 1;    
}
.content {
    position: absolute;
    top: 100%;
    width: 100%;
    height: 100%;
    background: rgb(25, 25, 25);
    border-top: 1px solid rgb(0, 0, 0);

     
}

.contentAbout {
    position: absolute;  
    width: 50%;
    background: rgb(255, 100, 50);
    float:left !important;
    
}
.contentPortfolio {
    position: absolute;
    width: 50%;
    background: rgb(20, 255, 25);
    float:right !important;
    right:0;
    
}

.content {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    color: white;
}

/*.toggleBackgroundAbout {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('http://lorempixel.com/g/1200/1200/');
    background-size: cover;
    background-repeat: no-repeat;
  
    
}

.toggleBackgroundPortfolio{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('http://lorempixel.com/g/1200/1200/');
    background-size: cover;
    background-repeat: no-repeat;
    
}

.toggleBackgroundContact {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('http://lorempixel.com/g/1200/1200/');
     -webkit-transition: background-image 1s ease-out;
    -moz-transition: background-image .5s ease-out;
    -o-transition: background-image .5s ease-out;
    transition: background-image .5s ease-out;
    background-size: cover;
    background-repeat: no-repeat;
    
}*/



nav {
    margin: 0;
    
    position: fixed;
    top: 0px;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0, 0.9), rgba(35, 35, 35, 0.9)) ;
/*    border-bottom: 1px solid rgb(0, 0, 0);
    box-shadow: inset 0 3px 3px -2px rgba(0,0,0,0.2),
    0 0 0 1px rgba(255,255,255,0.2),
    0 0 10px 2px rgba(255,255,255, 0.8);*/
/*    border-bottom-color: 1px solid linear-gradient(rgba(218,29,94,0.8), rgba(162,29,218,0.8), rgba(5,160,250,0.8));*/
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;
    border-bottom: 1px solid transparent;
    -moz-border-image: -moz-linear-gradient(top left, rgba(218,29,94,0.8), rgba(162,29,218,0.8), rgba(5,160,250,0.8));
    -webkit-border-image: -webkit-linear-gradient(top left, rgba(218,29,94,0.8), rgba(162,29,218,0.8), rgba(5,160,250,0.8));
    border-image: linear-gradient(to bottom right, rgba(218,29,94,0.8), rgba(162,29,218,0.8), rgba(5,160,250,0.8));
    border-image-slice: 1;
    -webkit-transition: border 1s ease-out;
    -moz-transition: border .5s ease-out;
    -o-transition: border .5s ease-out;
    transition: border .5s ease-out;
    
    z-index: 2;    
}


nav ul {
    float: right;
    padding: 0;
    margin-top: 0px;
    margin-bottom: 0px;
    margin: 0 15px;
    
   
}

nav ul li {
    display: inline-block;
    padding: 5px 5px 5px 0;
    margin: 0 5px;
}


nav a:link {
    text-decoration: none;
    color: rgba(255,255,255, 0.8);
    -webkit-transition: color 1s ease-out;
    -moz-transition: color .5s ease-out;
    -o-transition: color .5s ease-out;
    transition: color .5s ease-out;
    
    
}

nav a:visited  {
    text-decoration: none;
    color: rgba(255,255,255, 0.8);
    -webkit-transition: color 1s ease-out;
    -moz-transition: color .5s ease-out;
    -o-transition: color .5s ease-out;
    transition: color .5s ease-out;
    
    
}

nav a#about:hover {
    text-decoration: none;  
    padding-top: 5px;
    padding-bottom: 5px;
    text-shadow: 0px 0px 10px rgba(218,29,94,0.8);
    -webkit-transition: text-shadow 1s ease-out;
    -moz-transition: text-shadow .5s ease-out;
    -o-transition: text-shadow .5s ease-out;
    transition: text-shadow .5s ease-out;
    color: rgba(218,29,94,0.8);
    -webkit-transition: color 1s ease-out;
    -moz-transition: color .5s ease-out;
    -o-transition: color .5s ease-out;
    transition: color .5s ease-out;
    
    
}

nav a#portfolio:hover {
    text-decoration: none;  
    padding-top: 5px;
    padding-bottom: 5px;
    text-shadow:  0px 0px 10px rgba(162,29,218,0.8);
    -webkit-transition: text-shadow 1s ease-out;
    -moz-transition: text-shadow .5s ease-out;
    -o-transition: text-shadow .5s ease-out;
    transition: text-shadow .5s ease-out;
    color: rgba(162,29,218,0.8);
    -webkit-transition: color 1s ease-out;
    -moz-transition: color .5s ease-out;
    -o-transition: color .5s ease-out;
    transition: color .5s ease-out;
    
}



nav a#contact:hover {
    text-decoration: none;  
    padding-top: 5px;
    padding-bottom: 5px;
    text-shadow: 0px 0px 10px rgba(5,160,250,0.8);
    -webkit-transition: text-shadow 1s ease-out;
    -moz-transition: text-shadow .5s ease-out;
    -o-transition: text-shadow .5s ease-out;
    transition: text-shadow .5s ease-out;
    color: rgba(5,160,250,0.8);
    -webkit-transition: color 1s ease-out;
    -moz-transition: color .5s ease-out;
    -o-transition: color .5s ease-out;
    transition: color .5s ease-out;
    
}

nav a:active {
    text-decoration: none;
    
    
}

/*.toggleBackgroundAbout {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom left, black, rgba(5,160,250,0.6)),
    url('../img/header-bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: background 1s ease-out;
    -moz-transition: background .5s ease-out;
    -o-transition: background .5s ease-out;
    transition: background .5s ease-out;  
}*/

.toggleStyleAbout {
    border: none;
    -webkit-transition: border 1s ease-out;
    -moz-transition: border .5s ease-out;
    -o-transition: border .5s ease-out;
    transition: border .5s ease-out;    
    box-shadow: inset 0 3px 3px -2px rgba(0,0,0,0.2),
    0 0 0 1px rgba(255,255,255,0.2),
    0 0 20px 2px rgba(218,29,94,0.8);
    -webkit-transition: box-shadow 1s ease-out;
    -moz-transition: box-shadow .5s ease-out;
    -o-transition: box-shadow .5s ease-out;
    transition: box-shadow .5s ease-out;  
    
}

.toggleStylePortfolio {
    border: none;
    -webkit-transition: border 1s ease-out;
    -moz-transition: border .5s ease-out;
    -o-transition: border .5s ease-out;
    transition: border .5s ease-out;    
    box-shadow: inset 0 3px 3px -2px rgba(0,0,0,0.2),
    0 0 0 1px rgba(255,255,255,0.2),
    0 0 20px 2px rgba(162,29,218,0.8);
    -webkit-transition: box-shadow 1s ease-out;
    -moz-transition: box-shadow .5s ease-out;
    -o-transition: box-shadow .5s ease-out;
    transition: box-shadow .5s ease-out;     
}


.toggleStyleContact {
    border: none;
    -webkit-transition: border 1s ease-out;
    -moz-transition: border .5s ease-out;
    -o-transition: border .5s ease-out;
    transition: border .5s ease-out;    
    box-shadow: inset 0 3px 3px -2px rgba(0,0,0,0.2),
    0 0 0 1px rgba(255,255,255,0.2),
    0 0 20px 2px rgba(5,160,250,0.8);
    -webkit-transition: box-shadow 1s ease-out;
    -moz-transition: box-shadow .5s ease-out;
    -o-transition: box-shadow .5s ease-out;
    transition: box-shadow .5s ease-out;      
}

h1, h2 {
    margin: 0;
    padding: 5px;
    background: rgba(0, 0, 0, .5);
    color: white;
    font-family: 'Bangers', cursive;
    text-align: center;
    
    
}


.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

footer {
    color: white;
    z-index: 10;
}

    <body>
        <header>  
            <div class="image">          
                <nav class="colorChange clearfix">                    
                    <ul class="clearfix">
                    <a href="#" id="about"><li>ABOUT</li></a>
                    <a href="#" id="portfolio"><li>PORTFOLIO</li></a>
                    <a href="#" id="contact"><li>CONTACT</li></a>
                    </ul>                
                </nav>
                
            </div>
            <div class="content">
                
                    <div class="contentAbout">
                        <p>TEXT</p>                        
                    </div>
                    <div class="contentPortfolio">
                        <p>TEXT 2</p>
                    </div>
                </div>                
            </div>
            
    </header>
     <footer>
        &copy; 2015 Josef Molz
        </footer>
        <script>
            $(document).ready(function() {
            $('#about').hover(function() {
            $('.colorChange').toggleClass('toggleStyleAbout');
            });
        });    
        
          $(document).ready(function() {
            $('#portfolio').hover(function() {
            $('.colorChange').toggleClass('toggleStylePortfolio');
            });
        });   
        
          $(document).ready(function() {
            $('#contact').hover(function() {
            $('.colorChange').toggleClass('toggleStyleContact');
            });
        });   
        
          $(document).ready(function() {
            $('#about').hover(function() {
            $('.backgroundColorChange').toggleClass('toggleBackgroundAbout');
            });
        });  
        
        $(document).ready(function() {
            $('#portfolio').hover(function() {
            $('.backgroundColorChange').toggleClass('toggleBackgroundPortfolio');
            });
        }); 
        
         $(document).ready(function() {
            $('#contact').hover(function() {
            $('.backgroundColorChange').toggleClass('toggleBackgroundContact');
            });
        }); 
       
        </script>
    </body>
</html>

Answer 2

最终布局应该是这样的 this？

html,body {
    height: 100%;
    padding: 0;
    margin: 0;
}


header {
    position:fixed;
    margin: 0;
    width: 100%;
    min-height: 12%;
    background-color: #000; 

}

.image {
    background: #4ABCDD url('http://guardsmanbob.com/data/Wallpapers/wallpaper-1162819.jpg');
    background-size: cover;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
}

.content {  
    text-align: center;
    width: 100%;
    min-height: 22%;
    margin: 0;
}

.about {
    background: red;
}

.portfolio{
    background: yellow;
}

p {
    display: inline;
}

<body>
   <header>   
   </header>
        
   <div class='image'>

   </div>
        
   <div class ='content about'>
     <p>TEXT1</p>
   </div>
        
   <div class ='content portfolio'>
     <p>TEXT2</p>
   </div>
        
   <footer>
   </footer>

</body>

将两个容器相互放置

Placing two containers among each other

html

css

layout

containers