边框不能覆盖两个格

-1

我想覆盖两个使用类wrapper-side-content的边框。
高度必须设置为自动和宽度100％。但它并不如我所愿。
我已经使用position和z-index，但是没有用。边框不能覆盖两个格

这里是我的代码：

<style> 
.clear{clear:both;} 
.pad{padding:5px 0px;} 
.header-wrapper,.footer-wrapper,.wrapper-side-content{border:1px solid #e0e0e0; position:relative; border-radius:3px;} 
#body-wrapper{max-width:100%; margin:0px auto; padding:0px 0px;} 
.wrapper-side-content{max-width:100%; height:auto;} 
.header-wrapper,.footer-wrapper{max-width:100%;} 
.leftbar-wrapper,.content-wrapper{float:left; display:inline-block;} 
.leftbar-wrapper{width:29.8%;} 
.content-wrapper{width:69.9%;} 
.innerpad{padding:5px;} 
</style> 

<div id="body-wrapper"> 
    <div class="header-wrapper innerpad"> 
     <h1>mywebcom</h1> 
    </div> 
    <div class="clear pad"></div> 
    <div class="wrapper-side-content innerpad"> 
     <div class="leftbar-wrapper innerpad"> 
      This is a leftside bar menu 
     </div> 
     <div class="content-wrapper innerpad"> 
      This is a main content 
     </div> 
    </div> 
    <div class="clear pad"></div> 
    <div class="footer-wrapper innerpad"> 
     All Rights Reserved. &copy; <?php echo date('Y'); ?> <a href="/" title="" target="top">mywebcom </a> 
    </div> 
</div>

否则，您必须对建议我的CSS。

来源

2016-01-20 don magug

好，因为我不明白，在重复的来源，你的意思是这个问题，我用溢出：隐藏，但它没有工作。但是，无论如何，谢谢。学习者可以指任何事情。 –

当您使用float时，您必须清除它。添加到您的CSS：

.wrapper-side-content::after { 
    content: ""; 
    display: block; 
    clear: both; 
}

或者，您可以添加到overflow: hidden;.innerpad：

.innerpad { 
    overflow: hidden; 
}

来源

2016-01-20 11:05:39

边框不能覆盖两个格

回答

相关问题