如何在3栏布局中使用固定宽度居中的栏？ [英] How can I have a fixed-width centered column with in a 3-column layout?

问题描述

我想要将红色框放到条带的中间，并且只需要10厘米宽。左边和右边的内容应该是作为附加的图像。表示左侧容器应与左侧内容对齐，右侧内容应与右侧对齐。

我的HTML：

<div class="row">
  <div class="meta-left">
    <p>Left Contents with align left...</p>
  </div>
  <div class="logo-bg-top"></div>
  <div class="meta-right">
    <p>Right Contents with align right...</p>
  </div>
</div>

这是我在css中尝试的方式：

.row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.row .logo-bg-top {
    flex: 0 0 9em;
    background: red;
}

有人能指导我解决此问题吗？

推荐答案

as NiettheDarkAbsolsaid in the comments，最好使用grid layout：

如果要使用网格，可以将display: grid;添加到主容器中，然后使用grid-template-columns: 1fr 10em 1fr;指定其中的项。

fr表示文档宽度的一部分，因此由于布局是¹⁄₃(我们有3个不同的子元素)，中间的fr表示文档的^(100%-10em)⁄₂宽度。

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">

.row {
  display: grid;
  grid-template-columns: 1fr 10em 1fr;
}

.row [class*="meta"] {
  background: blue;
  color: white;
}

.row .meta-right {
  text-align: right;
}

.row .logo-bg-top {
  background: red;
}

<div class="row">
  <div class="meta-left">
    <p>Left Contents with align left...</p>
  </div>
  <div class="logo-bg-top"></div>
  <div class="meta-right">
    <p>Right Contents with align right...</p>
  </div>
</div>

但如果您坚持使用flexbox layout，这可能是一种执行此类操作的方法：

数据-lang="js"数据-隐藏="真"数据-控制台="假"数据-巴贝尔="假">

.row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
}

.row [class*="meta"] {
  background: blue;
  color: white;
  flex: 1;
}

.row .meta-right {
  text-align: right;
}

.row .logo-bg-top {
  flex: 0 0 10em;
  background: red;
}

<div class="row">
  <div class="meta-left">
    <p>Left Contents with align left...</p>
  </div>
  <div class="logo-bg-top"></div>
  <div class="meta-right">
    <p>Right Contents with align right...</p>
  </div>
</div>

这篇关于如何在3栏布局中使用固定宽度居中的栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！