主页 / 问题 / 642914
Accepted
VostokSisters
Asked:2020-03-22 23:05:29 +0000 UTC2020-03-22 23:05:29 +0000 UTC

三个块的响应式布局

  • 772

你需要创建这个：

在此处输入图像描述

中间是一个等于固定宽度的块。应该清楚地在页面上居中。
左侧和右侧的块，它们横跨页面的整个剩余宽度。

如何在不使用 flex的情况下做到这一点（立即变得更难，对吧？）？

我只想形成两层：第一层将有一个中心块，它将使用 . 定位在中心margin: auto。
而另外两个会占据width: 50%，但位于其下方，从而营造出一种适应感。
但如果没有拐杖，那将是可取的。以后我只能后悔了……出于同样的原因，你不能使用 flexes。

css

2 个回答

  1. Best Answer

    .table {
  display: table;
  width: 100%;
  height: 100px;
}

.left {
  display: table-cell;
  width: -webkit-calc(50% - 340px);
  width: -moz-calc(50% - 340px);
  width: calc(50% - 340px);
  background: yellow;
}

.center {
  display: table-cell;
  width: 680px;
  background: magenta;
}

.right {
  display: table-cell;
  width: -webkit-calc(50% - 340px);
  width: -moz-calc(50% - 340px);
  width: calc(50% - 340px);
  background: yellow;
}
    <div class="table">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

    • 3

  2. 您可以使用常规浮点数并使用width: calc((100% - 500px) / 2)侧面元素的属性。

    * {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container:after {
  content: '';
  clear: both;
  display: block;
}

.side {
  width: calc((100% - 500px) / 2);
  float: left;
  min-height: 200px;
  background-color: #ccc;
}

.center {
  float: left;
  background-color: #000;
  min-height: 200px;
  width: 500px;
  margin: auto;
}

.center--nofloat {
  float: none;
}
    <div class=container>
  <div class="center center--nofloat"></div>
</div>
<br>
<div class=container>
  <div class=side></div>
  <div class=center></div>
  <div class=side></div>
</div>

    • 3

相关问题