два деления рядом третья на правой стороне над содержимым - PullRequest
Новая
       10

два деления рядом третья на правой стороне над содержимым

0 голосов
/ 30 ноября 2018

Мне нужно разместить 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?

Positions

Ответы [ 2 ]

0 голосов
/ 30 ноября 2018

Это может быть способ с некоторой загрузкой:

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

0 голосов
/ 30 ноября 2018 

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