html - 如何用另一个元素填充元素的右侧？

Question

这是我的代码:

.parent{
  direction: rtl;
  border: 2px solid;
  background-color: #eee;
  height: 50%;
}

.full_height{
  height: 100%;
  background-color: red;
}

.full_width1, .full_width2{
  width: 100%;
  background-color: green;
}

<div class="parent">
  <div class="full_height"></div>
  <div class="full_width1">something1</div>
  <div class="full_width2">something2</div>
</div>

这是预期的输出:

我该如何实现？

Answer 1

可能的解决方案如下所示:

html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}
.parent{
  direction: rtl;
  border: 2px solid;
  background-color: #eee;
  height: 50%;
  overflow: hidden;
}
.full_height{
  float: right;
  height: 100%;
  width: 120px;
  background-color: red;
}
.full_width1, .full_width2{
  min-width: 120px;
  height: 50%;
  width: auto;
  overflow: hidden;
  background-color: green;
}
.full_width2{
   background-color: blue;
}

您可以在此处找到 fiddle 预览:https://jsfiddle.net/7pb8pxnx/2/