Html 将float div添加到此灵活布局中

我和你一起工作

我想在

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>

.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;
}

并更改了

宽度

，但什么也没发生。新的

div

位于

内容的底部。
如何解决此问题？
弹性项上的浮动属性被忽略。因此，在
.sidebar
或
.content
上设置的任何浮点值都将不起作用。这是flexbox规范中的设计：

您可以通过将
.content
和
.sidebar
元素包装到另一个元素中来解决这个问题，然后在其中使用浮动，或者将包装器元素设置为列方向的flex容器。例如：

<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只允许您在一个方向（行或列）上排列（以及分布和调整大小）元素。它可以允许包装，但不能同时在列和行方向上拆分flex项。如果你需要像你描述的那样的布局，你需要嵌套东西。

你想这么做吗

   *
{
    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;
}

我想你需要这个：

使用
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>

要浮动的
div
放在哪里？你能举一个例子，在其中包含了不起作用的标记和CSS吗？我改变了它。但是边栏样式在哪里呢？谢谢，我将内容包装到另一个div中，并将其设置为float样式。但它破坏了一切。我认为通过另一个div包装flex项目会导致删除flexbox。当然，您需要设置新包装的flex属性，而不是旧包装的flex属性。然后该容器的子容器可以正常浮动。我编辑了它，但像以前一样忽略了float属性。你能用HTML和CSS标记给我看吗？
header, .content, footer {
    width: 300px;
}

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