使用 calc() 进行列对齐

Question

我想使用 calc() 相对于 .container 块对齐行中的列，但无法测量正确的宽度。

我使用了公式width: calc(100% / number of boxes – total margin size)，但它并没有像我预期的那样工作。右侧可用空间过多。

我认为问题出在我的 css 上，但找不到确切的位置。希望得到您的帮助:)

附：将margin:0 设置为第一个.col-lg-4，但没有帮助。

现在的样子：

JSFiddle

body, h1 {
	margin: 0;
	padding: 0;
	font-family: "Lucida Console", Monaco, monospace;
	font-size: 1em;
}

.container-fluid {
	margin: 15px 25px 10px 25px;
	border: 1px solid black;
}

h1 {
	font-size: 1.75rem;
	padding-bottom: 15px;
	text-align: center;
}

.col-lg-4, .col-md-6, .col-md-12, .col-xs-12 {
	box-sizing: border-box;
	float: left;
	margin-left: 5px;
	background-color: #ddd;
	padding: 35px 8px 0 8px;
	border: 1px solid black;
	position: relative;
}

.col-lg-4:first-child {
	margin: 0;
}

.title {
	position: absolute;
	top: 0;
	right: 0;
	border: 1px solid black;
	width: 100px;
	text-align: center;
	padding: 3px 10px 3px 10px;
	font-weight: 500;
	font-size: 1.25rem;
}

@media (min-width:992px) {
	.col-lg-4 {
		width: calc(100% / 3 - 10px);
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.col-md-6 {
		width: calc(100% / 2 - 5px);
	}
	.col-md-12 {
		margin-left: 0;
		margin-top: 1%;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.col-xs-12 {
	width: 100%;
	margin-bottom: 1%;
	}
}

.chicken {
	background-color: pink;
}

.beef {
	background-color: #c14543;
	color: #fff;
}

.sushi {
	background-color: #e5d198;
}

  <div class="container-fluid">
    <h1>Our Menu</h1>
      <div class="row">
        <div class="col-lg-4 col-md-6 col-xs-12">
        <span class="title chicken">Chicken</span>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur voluptatem eos, ullam totam architecto vitae minima quis corporis vel. Eius aut tempore, recusandae ipsa temporibus fugiat placeat. Delectus, illum, totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima nam adipisci, vitae dolorem rem nesciunt, rerum commodi deleniti, deserunt, aspernatur veritatis esse maiores harum quis quasi. Laboriosam eligendi quam distinctio!</div>
        <div class="col-lg-4 col-md-6 col-xs-12">
        <span class="title beef">Beef</span>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus repudiandae nihil voluptate architecto quasi reprehenderit aut quibusdam quam, omnis blanditiis repellendus hic numquam quia. Blanditiis illum porro magnam, obcaecati aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, fugit. Quae assumenda, quisquam natus delectus molestias. Maxime quo quia, quae ratione nihil eum. Quo temporibus vel maiores, deserunt!</div>
        <div class="col-lg-4 col-md-12 col-xs-12">
        <span class="title sushi">Sushi</span>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quas culpa accusamus dicta, et numquam aspernatur optio neque voluptate ullam. At quos, dignissimos harum quod ipsa quam tempore cum! Ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio est cumque, magni rem harum repudiandae error, totam quis ipsum eum, asperiores delectus recusandae, velit. Tempora eius minus vitae distinctio. Accusantium.</div>
      </div>
  </div>

Answer 1

我会非常谨慎地使用这种方法。 IE isn't going to like you.

你有两个选择：

1) 如果浏览器兼容性不是问题，请使用Flexbox。另请参阅compatibility table。

.menu {
  border: 1px solid black;
}
.header {
  margin: 0;
  background: black;
  color: white;
  text-align: center;
}
.row {
  display: flex;
}
.column {
  padding: 10px;
  border-left: 1px solid black;
  flex: 1 1 0;
}
.column:first-of-type {
  border: 0;
}

<div class="menu">
  <h1 class="header">Menu</h1>
  <div class="row">
    <div class="column">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae est eget eros facilisis luctus vitae non augue. Nulla quis lacinia quam. Curabitur finibus leo arcu, vel pretium elit auctor sed. Suspendisse suscipit ligula elit, in tincidunt leo
      eleifend quis. Sed eu lacinia augue.
    </div>
    <div class="column">
      Ut tempus est nec rutrum vehicula. Suspendisse ultrices ut orci eu aliquet. Vestibulum eget malesuada metus, at sollicitudin nisl. Integer hendrerit non eros nec interdum.
    </div>
    <div class="column">
      Mauris luctus mattis lacus, eu semper risus. Mauris semper lectus eu ullamcorper porta. Vestibulum at fringilla orci, in vestibulum sapien. Aliquam in lectus vitae nisi lobortis pretium at a erat. In et tortor odio.
    </div>
  </div>
</div>

2) 如果浏览器兼容性有问题，请使用表格布局。

.menu {
  border: 1px solid black;
}
.header {
  margin: 0;
  background: black;
  color: white;
  text-align: center;
}
.row {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.column {
  display: table-cell;
  padding: 10px;
  border-left: 1px solid black;
}
.column:first-of-type {
  border: 0;
}

<div class="menu">
  <h1 class="header">Menu</h1>
  <div class="row">
    <div class="column">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae est eget eros facilisis luctus vitae non augue. Nulla quis lacinia quam. Curabitur finibus leo arcu, vel pretium elit auctor sed. Suspendisse suscipit ligula elit, in tincidunt leo
      eleifend quis. Sed eu lacinia augue.
    </div>
    <div class="column">
      Ut tempus est nec rutrum vehicula. Suspendisse ultrices ut orci eu aliquet. Vestibulum eget malesuada metus, at sollicitudin nisl. Integer hendrerit non eros nec interdum.
    </div>
    <div class="column">
      Mauris luctus mattis lacus, eu semper risus. Mauris semper lectus eu ullamcorper porta. Vestibulum at fringilla orci, in vestibulum sapien. Aliquam in lectus vitae nisi lobortis pretium at a erat. In et tortor odio.
    </div>
  </div>
</div>

Answer 2

您必须为您的 .lg 和 .md 尺寸调整最后一个子样式，这是造成差距的原因。给你：https://jsfiddle.net/denea/j7d0b5gL/34/

@media (min-width:992px) {
    .col-lg-4 {
        width: calc(100% / 3 - 5px);
    }

  .col-lg-4:last-child {
    width: calc(100% /3);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
    .col-md-6 {
        width: calc(100% / 2 - 5px);
    }

  .col-md-6:nth-child(2) {
    width: calc(100% /2);
  }

    .col-md-12 {
        margin-left: 0;
        margin-top: 1%;
        width: 100%;
    }
}

Answer 3

这里有三件事在起作用：

首先，你的数学导致了这个：

width: calc(100% / 3 - 10px);

在 3 列之后，您已经失去了 30 像素的宽度，这就是右侧的内容。

因为你只有 5px 的 margin-left，它应该是：

但是，问题是如果你成功了：

宽度：计算（100% / 3 - 5px）；

它似乎太宽了 - 但这是由于臭名昭著的空白问题，如果标签之间有任何空白，则会导致添加大约 4px 的右边距。从您的代码：

<div class="col-lg-4 col-md-6 col-xs-12">
    <span class="title chicken">Chicken</span>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur voluptatem eos, ullam totam architecto vitae minima quis corporis vel. Eius aut tempore, recusandae ipsa temporibus fugiat placeat. Delectus, illum, totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima nam adipisci, vitae dolorem rem nesciunt, rerum commodi deleniti, deserunt, aspernatur veritatis esse maiores harum quis quasi. Laboriosam eligendi quam distinctio!</div><!-- WHITE SPACE -->
    <div class="col-lg-4 col-md-6 col-xs-12">

那么，你需要清理空白，像这样：

</div><div class="col-lg-4 col-md-6 col-xs-12"> 

剩下一点：你的左边距，需要从第一个元素中删除：

.col-lg-4:first-child {
    margin-left: 0;
}

这让我们非常接近，但您还有一个问题需要克服：

您总共有 10px 的 margin-left （两个元素，每个 5px），它不会被 3 平均除以。因此，我建议将其设为 12px (margin-left: 6px;)，这样您就可以调整公式，并获得均匀的布局；

width: calc(100% / 3 - 4px);
margin-left: 6px;

这是一个有效的小提琴：

https://jsfiddle.net/cale_b/j7d0b5gL/25/

正如其他人评论的那样，flexbox 可能是您的朋友 - 虽然看起来您使用的是 Bootstrap，这意味着您必须编写自己的 flexbox 代码。

这是一个使用现有标记和细微样式更改的快速而简单的 flexbox 演示：https://jsfiddle.net/cale_b/qbkw5qpu/1/

Answer 4

计算的主要问题是您必须在 除法之前减去边距宽度。

所以

.col-lg-4 {
    width: calc((100% - 10px) / 3 );
}

和

.col-md-6 {
    width: calc((100% - 5px) / 2);
}