两个 div 并排在右侧第三个内容上方答案

【问题标题】：two divs side by side third on right side above content两个 div 并排在右侧第三个内容上方
【发布时间】：2018-11-30 22:33:18
【问题描述】：

我需要在容器内放置 3 个 div，我需要第一个具有特定宽度的 div 第二个来填充剩余空间，第三个位于右侧和第二个 div 上方。

这是我目前得到的https://jsfiddle.net/96v5zdra/

<div class="wrapper">
    <div class="first">1</div>
    <div class="second">Some lorem ipsum long text</div>
    <div class="third">3</div>
</div>

.wrapper {
    width: 200px;
    border: solid 1px black;
}

.first {
    width: 50px; 
    background-color: red;
    float: left;
}

.second {
    background-color: green;
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.third {
    background-color: rgba(255, 0, 0, 0.4);
    width: 50px; 
    float: right;
}

这样的 css 样式会是什么样子？

【问题讨论】：

第三个div的宽度是多少？
请添加示例图片。
假设是 40 像素
欢迎来到 Stackoverflow。你能在你的问题中添加一些代码吗？
需要一些微调，但可能看起来像这样：jsfiddle.net/86o3q9r2

标签： html css css-position

【解决方案1】：

body {
  padding:0;
  margin:0;
}

.container {
  width:600px;
  height:200px;
  background:#fff;
  border:10px solid #000;
  margin:100px auto 0;
  position:relative;
  display:flex;
}

.red {
  height:100%;
  width:30%;
  background:red;
  border-right:10px solid #000;
  box-sizing:border-box;
  /*  the following codes for numbers. deletable.*/
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:90px;
  font-family:monospace;
  color:#fff;
}

.green {
  heigth:100%;
  width:70%;
  background:green;
  box-sizing:border-box;
   /*  the following codes for numbers. deletable.*/
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:90px;
  font-family:monospace;
  color:#fff;
}

.green_right{
  position:absolute;
  right:0;
  top:0;
  background:transparent;
  border:10px dashed #000;
  height:100%;
  width:30%;
  box-sizing:border-box;
  /*  the following codes for numbers. deletable.*/
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:90px;
  font-family:monospace;
  color:#fff;
}

<div class="container">
  <div class="red">
    1
  </div>
 <div class="green">
   2
    <div class="green_right">
      3
   </div>
  </div>
</div>

【讨论】：

【解决方案2】：

这可能是一种引导方式：

HTML：

  <div class="container">
      <div class="wrapper row">
        <div class="first">Some<br> lorem <br>ipsum <br>long <br>text</div>
        <div class="second col">Some<br> lorem <br>ipsum <br>long   <br>text</div>
        <div class="third">Some<br> lorem <br>ipsum <br>long <br>text</div>
      </div>
    </div>

CSS：

.wrapper {
  border: solid 1px black;
  position:relative;
}

.first { 
  background-color: red;
  width: 50px;
}

.second {
  background-color: green;
}

.third {
  background-color: rgba(255, 0, 0, 0.4);
  position: absolute;
  right: 0;
}

现场示例：https://codepen.io/PMertgen/pen/zMyjQd

【讨论】：