1

我是一个应用程序开发人员，可以说是没有前端的离线应用程序或服务，而且我已经很久没有看到任何 HTML 或类似的东西了。

但是 HTML5 的新特性其实让我很感兴趣，现在我知道了，Flex-box 目前还没有统一支持，需要用到 webkit-box 和 moz-box 等。

但我认为对于博客，我可能会开始考虑改变设计。

但我不太清楚我们将如何进行 2 x 2 布局，有点像：

  • 左上：固定高度，动态宽度
  • 右上角：固定高度，固定宽度
  • 左按钮：动态高度，动态宽度。
  • 右按钮：动态高度、固定宽度
  • 徽标从左上角重叠到按钮右侧。
  • 盒子之间的小边框。

布局

框下方的动态高度不是必须的，只要它们对齐，内容很可能会填充它们。

但是，您将如何最好地使用新设施进行这种布局？

编辑：我最终放弃了这个。

4

1 回答 1

0

对于布局，您可以使用

.wrapper {
  display: flex;
}
.left, .right {
  display: flex;
  flex-direction: column;
}
.right {
  width: 200px; /* Fixed width */
}
.top, .bottom {
  border: 1px solid;
  margin: 1px;
}
.top {
  height: 100px; /* Fixed height */
}
.bottom {
  flex-grow: 1; /* Same (flexible) height for both */
}
<div class="wrapper">
  <div class="left">
    <div class="top">Left top</div>
    <div class="bottom">Left bottom</div>
  </div>
  <div class="right">
    <div class="top">Right top</div>
    <div class="bottom">Right bottom</div>
  </div>
</div>

要添加徽标，您可以使用伪元素的边框创建一个三角形，然后旋转它。

.wrapper {
  display: flex;
}
.left, .right {
  display: flex;
  flex-direction: column;
}
.right {
  width: 200px; /* Fixed width */
}
.top, .bottom {
  border: 1px solid;
  margin: 1px;
  position: relative;
}
.top {
  height: 100px; /* Fixed height */
}
.bottom {
  flex-grow: 1; /* Same (flexible) height for both */
}
.left > .top:after, .right > .bottom:after {
    content: '';
    position: absolute;
    border: 5px solid transparent;
}
.left > .top:after {
    right: 0;
    bottom: 0;
    border-right: none;
    border-left: 15px solid black;
    transform: translateY(50%) rotate(45deg);
    transform-origin: right;
}
.right > .bottom:after {
    left: 0;
    top: 0;
    border-left: none;
    border-right: 15px solid black;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: left;
}
<div class="wrapper">
  <div class="left">
    <div class="top">Left top</div>
    <div class="bottom">Left bottom</div>
  </div>
  <div class="right">
    <div class="top">Right top</div>
    <div class="bottom">Right bottom</div>
  </div>
</div>

于 2015-05-23T17:35:29.717 回答