將float div添加到此靈活佈局

Question

我正在與this layout一起工作。

我想添加一個div旁邊contentdiv。 我想：

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站在contentdiv的底部。 我該如何解決這個問題？

Answer 1

我認爲你需要這樣的： DEMO

包裝你content div的文本在另一個DIV lft與float:left CSS然後包lft和sidebar divs到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; 
} 

Answer 2

Flex項目上的浮動屬性被忽略。因此，在.sidebar或.content上設置的任何浮動將不起作用。這是在flexbox規範中設計的：http://www.w3.org/TR/css3-flexbox/#flex-containers。

您可以通過在另一個元素中包裝.content和.sidebar元素來解決此問題，然後使用其中的浮動元素，或將包裝元素設置爲列方向上的彈性容器。例如：

<header></header> 
<div class="content"><!-- set this to be the flex item, eg. flex: 1 1 auto; --> 
    <div class="content-inner"></div> 
    <div class="sidebar"></div><!-- float this, for example. --> 
</div> 
<footer></footer> 

重要的一點是，實現Flexbox將只允許您排隊（和分發&尺寸）在1個方向（行或列）的元件。它可以允許打包，但不能一次將列項目和行項目中的彈性項目分開。如果你需要像你描述的佈局，你需要嵌套的東西。

Answer 3

jsfiddle

你特林做

* 
{ 
    margin:0;padding:0; 
} 
html,body 
{ 
    height: 100%; 
} 
.container 
{ 
    -ms-box-orient: vertical; 
    display: -ms-flex; 
    width:400px; 
    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, .content, footer 
{ 
    width: 200px; 
} 
header 
{ 
    background: yellow; 
} 
.row{ 
    -ms-box-orient: vertical; 
    display: -ms-flex; 
    width:400px; 
    height: 200px; 
    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: row; 
    -webkit-flex-direction: row; 
    flex-direction: row; 

} 
.row,.content,.sidebar 
{ 
    background: pink; 

    -ms-flex: 1 1 auto; 
    -webkit-flex: 1 1 auto; 
    flex: 1 1 auto; 
    overflow: auto; 

} 
footer 
{ 
    background: gray; 
    height: 80px; 
}