Question

这就是我想要实现的目标（蒙太奇图片）：

红色轮廓是容器，其大小是相对于页面/浏览器窗口计算的。然后，我想要两个div（绿色虚线），宽度为容器的15％（和高度的100％），粘在容器的右边，占用他们需要的空间 - 最后，我想要一个高度为100％容器的左对齐div（蓝色虚线），以占据剩余的剩余宽度。

不幸的是，我最接近的是：

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>test-rightfloat</title>
    <style type="text/css">
body {
  width: 100%;
}
.cntr {
  width: 60vh; height: 15vh;
  border: 2px solid red;
}
.lb {
  width: 70%; height: 100%;
  border: 2px dashed blue;
  display: inline-block;
}
.gr {
  width: 15%; height: 100%;
  border: 2px dashed green;
  float: right;/**/
  text-align: center;
  vertical-align: middle;
  line-height: 5em;
  display: inline-block;
  margin: 0; padding: 0;
  /*margin-right:0;
  margin-left:auto;*/
  /*position: absolute; right: 0; left: auto;*/
}
    </style>
  </head>

  <body>
<div id="contain" class="cntr">
  <div id="leftblue" class="lb"></div>
  <div id="greenright1" class="gr">A</div>
  <div id="greenright1" class="gr">B</div>
</div>

  </body>
</html>

...产生这个（Firefox 43）：

...这不是我的想法：正确的div尝试两者都坚持容器的右边缘，因此他们不是并排站立，而是在彼此之上代替......

我能做些什么来获得所需的设计（最好是在CSS5之前，而不是改变HTML结构 - 而且没有JS）？

Answer 1

您可以在此处使用Flexbox，只需使用flex: 0 0 15%上的.gr和flex: 1上的.lb

＆＃13;

* {
  box-sizing: border-box;
}
.cntr {
  width: 60vh; 
  height: 15vh;
  border: 2px solid red;
  display: flex;
}
.lb { 
  border: 2px dashed blue;
  flex: 1;
}
.gr {
  flex: 0 0 15%;
  border: 2px dashed green;
}

＆＃13;

<div id="contain" class="cntr">
  <div id="leftblue" class="lb"></div>
  <div id="greenright1" class="gr">A</div>
  <div id="greenright2" class="gr">B</div>
</div>

＆＃13;

更新：实际上，因为15%上.gr的宽度已固定为70%，您可以.lb使用floats box-sizing: border-box，但需要添加* { box-sizing: border-box; } .cntr { width: 60vh; height: 15vh; border: 2px solid red; } .lb { border: 2px dashed blue; width: 70%; height: 100%; float: left; } .gr { width: 15%; height: 100%; border: 2px dashed green; float: left; } <div id="contain" class="cntr"> <div id="leftblue" class="lb">Left</div> <div id="greenright1" class="gr">A</div> <div id="greenright2" class="gr">B</div> </div>

＆＃13;

$("#xxx").css({transition:"all 1500ms ease-out 0ms",color:"#00FFFF", fontSize:"40px"});

＆＃13;

(function () {
  'user strict';

  angular.module('app.directives').directive('clickOff', ClickOff);

  function ClickOff($parse, $document) {
    var directive = {
      link: link
    };

    return directive;

    function link(scope, $element, attr) {

      var fn = $parse(attr["clickOff"]);

      $element.bind('click', function (event) {
        event.stopPropagation();
      });

      angular.element($document[0].body).bind("click", function (event) {
        scope.$apply(function () {
          $document[0].activeElement.blur();
          fn(scope, { $event: event });
        });
      });
    }
  }
})();

＆＃13;

Answer 2

您的问题是由边框引起的。添加边框时，应考虑将边框宽度的两倍添加到实际位置或删除边框

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>test-rightfloat</title>
    <style type="text/css">
body {
  width: 100%;
}
.cntr {
  width: 60vh; height: 15vh;
  border: 2px solid red;
}
.lb {
  width: 70%; height: 100%;
  /*border: 2px dashed blue;*/   <--- NO BORDER
  display: inline-block;
}
.gr {
  width: 15%; height: 100%;
  /*border: 2px dashed green;*/  <--- NO BORDER
  float: right;/**/
  text-align: center;
  vertical-align: middle;
  line-height: 5em;
  display: inline-block;
  margin: 0; padding: 0;
  /*margin-right:0;
  margin-left:auto;*/
  /*position: absolute; right: 0; left: auto;*/
}
    </style>
  </head>

  <body>
<div id="contain" class="cntr">
  <div id="leftblue" class="lb"></div>
  <div id="greenright1" class="gr">A</div>
  <div id="greenright1" class="gr">B</div>
</div>

  </body>
</html>

将div并排堆叠到容器的右侧（另一个div左侧锚定）

2 个答案: