主页 / 问题 / 851950
Accepted
iRumba
Asked:2020-07-09 12:48:40 +0000 UTC2020-07-09 12:48:40 +0000 UTC

帮我搭建一个带元素的小容器

  • 772

你需要一个块，如图所示。如果有些东西看起来歪了，我会附上文字描述。

有一个主块。它可以位于页面上的任何位置（可能这些信息会影响最终结果），它的尺寸是手动设置的并影响其内容。内容不应该能够调整块的大小（应该适合它）。

在此块内有 3 个部分：

第一个和最后一个的宽度相等，并占据块中的所有可用空间。

中间部分的宽度是自动的，取决于内容的宽度。

中间部分有2个垂直排列的块。它们的垂直位置居中（相对于主机的高度）。

重要的！

需要IE11支持

布局

html

2 个回答

  1. 例子

    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.block {
  height: 100vh;
  border: 2px solid green;
  display: table;
  width: 100%;
}

.block__item {
  display: table-cell;
  vertical-align: top;
  border: 1px solid #f00;
  padding: 15px;
}

.block__item:first-of-type,
.block__item:last-of-type {
  width: 50%;
}

.block__item--center {
  vertical-align: middle;
}

.block__child {
  margin: 10px 0;
  padding: 15px;
  min-height: 50px;
  border: 1px solid #999;
}
    <div class="block">
  <div class="block__item">
    1 block
  </div>
  <div class="block__item block__item--center">
    <div class="block__childs">
      <div class="block__child">Ширина средней секции автоматическая и зависит от ширины контента.</div>
      <div class="block__child"><img src="http://via.placeholder.com/250x250"></div>
    </div>
  </div>
  <div class="block__item">
    3 block
  </div>
</div>

    • 3
  2. Best Answer

    签入 IE11 作品 - flexbox

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.flex {
  display: flex;
  justify-content: space-around;
  min-height: 400px;
}

.elem1,
.elem2 {
  flex: 1;
  text-align: center;
}

.elems {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 0 10px;
}

.outer-elem {
  background: #fbfbfb;
  min-height: 30%;
  padding: 0 10px;
  margin: 10px 0;
}
    <div class="flex">
  <div class="elem elem1">первый блок</div>
  <div class="elem elems">
    <div class="outer-elem">первый вертикальный</div>
    <div class="outer-elem">второй вертикальный</div>
  </div>
  <div class="elem elem2">третий блок</div>
</div>

    • 2

相关问题