Question

我希望使用calc（）将行相对于.container块对齐，但无法测量正确的宽度。

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

我认为问题出现在我的CSS上，但无法找到确切的位置。希望得到你的帮助:)）

P.S。为margin:0设置.col-lg-4，但它没有帮助。

现在的样子：

＆＃13;

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;
}

＆＃13;

  <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>

＆＃13;

Answer 1

您必须为 .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 2

我对使用这种方法非常谨慎。 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 3

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

所以

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

和

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

Answer 4

这里有三件事：

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

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

在3列之后，您已经失去了30px的宽度，这就是在右侧悬挂的东西。

由于你只有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代码。 / p>

这是一个快速而肮脏的Flexbox演示，使用您现有的标记和次要的样式更改：https://jsfiddle.net/cale_b/qbkw5qpu/1/

使用calc（）

4 个答案: