Question

我如何编码这样的布局：http://i.imgur.com/4kgVMJt.png

当前代码html：

<div class="wrapper">

    <aside>
        Sidebar        
    </aside>

    <article>
          Content 
    </article>

</div>

当前代码css：

*{
    margin: 0;
    padding: 0;
}

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

aside{
    padding: 50px 0;
    width: 30%;
    float: left;
    display: inline-block;
    background: #aaa;
}

article{
    padding: 50px 0;
    width: 70%;
    float: left;
    display: inline-block;
    background: #777;
}

红线是一个容器。请帮忙。

Answer 1

快速和肮脏的解决方案：背景div。 http://jsfiddle.net/VwWjp/

div.halfbg{
    background-color:#aaa;
    min-width:180px;
    width:calc(50% - 120px);
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    z-index:-999;
}

Answer 2

使用CSS3属性框大小，您可以轻松实现这种布局。

<强> HTML

<div class="wrapper">

   <aside>
    <p>Content Goes Here</p>    
   </aside>

   <article>
      <p>Content Goes Here</p>
   </article>
</div>

<强> CSS

 *{
margin: 0;
padding: 0;
}

.wrapper{
 margin: 0 auto;
}

aside{
padding:50px 0 50px 10%;
width: 30%;
float:left;
background: #aaa;
box-sizing:border-box;
-webkit-box-sizing:border-box;
}

article{
padding:50px 10% 50px 0;
width: 70%;
float:left;
background: #777;
box-sizing:border-box;
-webkit-box-sizing:border-box;
}

Have a Fiddle DEMO

CSS - 从屏幕左侧开始的侧边栏布局（见图）

2 个答案: