对齐左侧浮动元素宽度的元素

Question

我需要将.element的宽度调整为等于.block1左浮动元素的总宽度数。对于不同的屏幕，一行中安装的.block1左浮动元素的数量将是不同的，它们的总宽度也是不同的。那么我应该如何对齐.element？

＆＃13;

＆＃13;

.block1 {
  width: 300px;
  float: left;
  background: #ccc;
  margin: 10px;
  padding: 10px;
}

.wrapper {
  display: table;
}

.element {
  float: right;
  color: #fff;
  background: #000;
  padding: 10px;
}

.clear {
  clear: both;
}

.left {
  float: left;
}

＆＃13;

<div class="wrapper">
  <h1 class="left">My Title</h1>
  <div class="element">Element</div>

  <div class="clear"></div>

  <div class="block1">Block</div>
  <div class="block1">Block</div>
  <div class="block1">Block</div>
  <div class="block1">Block</div>
  <div class="block1">Block</div>
  <div class="block1">Block</div>
  <div class="block1">Block</div>
  <div class="block1">Block</div>
  <div class="block1">Block</div>
  <div class="block1">Block</div>
  <div class="block1">Block</div>
  <div class="block1">Block</div>
  <div class="block1">Block</div>
  <div class="block1">Block</div>
  <div class="block1">Block</div>
</div>

＆＃13;

＆＃13;

＆＃13;

.element在浏览器的右边框附近浮动，但我需要.element支架，就像打印屏幕上的屏幕宽度不同：

Answer 1

您必须将所有.block1元素放在公共父容器中，并使用media-queries改变width的{​​{1}}屏幕大小，如果您愿意的话实现你在这里所做的一切。

参考代码：

＆＃13;

＆＃13;

.parent

＆＃13;

.block1 {
  width: 300px;
  float: left;
  background: #ccc;
  margin: 10px;
  padding: 10px;
}

.wrapper {
  display: table;
}

.element {
  float: right;
  color: #fff;
  background: #000;
  padding: 10px;
}

.clear {
  clear: both;
}

.left {
  float: left;
}

@media only screen and (max-width: 679px) {
  .parent {
    width: 330px;
  }
}

@media only screen and (min-width: 680px) and (max-width: 980px) {
  .parent {
    width: 680px;
  }
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

.catch((error:any) => Observable.throw(new Error(error.json().error || 'Server error')));

你可以给宽度父div，即包装

Answer 3

您可以使用以下CSS

.block1 {
    display: inline-block;
    vertical-align: top;
    width: calc(33% - 20px);
}