HTML5 + CSS：DIV左右浮动答案

【问题标题】：HTML5 + CSS: DIV floating left and rightHTML5 + CSS：DIV左右浮动
【发布时间】：2018-08-15 12:33:19
【问题描述】：

我正在尝试获取以下响应式布局

DIVs

没有运气。有人可以帮帮我吗？ DIV1 的宽度 = 100%， DIV 2、DIV3 和 DIV4 都有 float:left 而 DIV5 有 float:right;但是我实现的布局是错误的:(

【问题讨论】：

请改进您的问题：stackoverflow.com/help/how-to-ask
你好，你能用你的 html+css 代码创建一个 sn-p 来向我们展示这个问题吗？
这里没有使用网格布局的任何具体原因？
将 DIV5 放在 DIV4 之前以强制向右浮动

标签： css html

【解决方案1】：

我尝试使用 flexbox 创建图像。

https://codepen.io/goughjo02/pen/GBLdXW

注意而不是float: right;，您可以使用margin-left: auto; - 具有自动将所有可用空间分配到div 左侧的效果。

【讨论】：

【解决方案2】：

你去！

我跟着你的照片。

#wrap {
  border-style:solid;
  border-width:thin;
  padding: 10px;
  min-height:50px;
  min-width:100%
  display: flow-root;
}

#innerwrap{
  display: inline-grid;
}

.div_left {  
  min-width:150px;
  max-width:150px;
  border-style:solid;
  border-width:thin;
  text-align:center;
  float:left;
  margin:5px 10px 5px 10px;
  padding: 15px;
}

#div2 {  
  min-width:150px;
  max-width:150px;
  border-style:solid;
  border-width:thin;
  text-align:center;
  float:left;
  padding: 50px 15px 50px 15px;
}

#right {
  min-width:150px;
  max-width:150px;
  border-style:solid;
  border-width:thin;
  text-align:center;
  float: right;
  margin-top:5px;
  padding: 15px;
}

Div1
<div id="wrap">
<div id="div2">Div2</div>

<div id="innerwrap">
<div class="div_left">Div3</div>
<div class="div_left">Div4</div>
</div>

<div id="right">Div5</div>
</div>

【讨论】：

@Mr.Jones 我很高兴在 CSS 和 HTML5 方面提供帮助。 :)