内容上方右侧并排两个div

Question

我需要在容器内放置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样式看起来如何？

Answer 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>

Answer 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