html - 将 float div 添加到这个灵活的布局

Question

我正在使用 this layout .

我想在 content div 旁边添加一个 div。 我试过:

HTML:

<div class="container">
    <header>here is the header </header>
    <div class="sidebar">my sidebar content</div>
<div class="content">
/my text
</div>
<footer>
       and the footer
</footer>
</div>

CSS:

.sidebar{
width: 100px;
float: left;
}

{
    margin:0;padding:0;
}
html,body
{
    height: 100%;
}
.container
{
   -ms-box-orient: vertical;
   display: -ms-flex;
   height: 100%;
   display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
   display: -moz-flex; 
   display: -ms-flexbox;   /* MID: IE 10 */
   display: -webkit-flex;  /* NEW, Chrome 21+ */ 
   display: flex;          /* NEW: Opera 12.1, Firefox 22+ */    

   -ms-flex-direction: column; 
   -webkit-flex-direction: column;
   flex-direction: column; 
}
header, footer
{
    width: 300px;   
}
.content{
 width: 200px;   

}
    header
    {
        background: yellow;
    }
    .content
    {
        background: pink;

    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: auto;
    height:0;
    min-height: 0;
}
footer
{
    background: gray;
    height: 80px;
}

并更改了 width 但没有任何反应。新的 div 位于 content div 的底部。 我该如何解决这个问题？

Answer 1

我想你需要这个: DEMO

使用 float:left css 将您的 content div 的文本包装在另一个 div lft 中，然后包装 lft 和 sidebar div 到 content div

HTML

<div class="container">
    <header>Your header</header>
    <div class="content">
        <div class="lft">Your text</div>
        <div class="sidebar">Your Sidebar content</div>
    </div>
    <footer>Your footer</footer>
</div>

CSS

header, .content, footer {
    width: 300px;
}

.lft {
    width: 200px;
    float: left;
}
.sidebar {
    width: 100px;
    float: right;
}