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

Question

我需要在一个容器内放置 3 个 div，我需要第一个 div 旁边有特定的宽度，第二个用来填充剩余的 space，第三个在右侧和第二个 div.

<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

这可能是一些 bootstrap:

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

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

two divs side by side third on right side above content

html

css

css-position