使用calc（）進行列對齊

Question

我想使用calc（）相對於.container塊對齊行中的列，但無法測量正確的寬度。

我使用的公式width: calc(100% / number of boxes – total margin size)但是它沒有按我預期的那樣工作。 右邊的可用空間過多。

我認為問題出在我的CSS上，但找不到確切的位置。 希望得到您的幫助：）

PS為第一個.col-lg-4設置margin:0 ，但沒有幫助。

現在的樣子：

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

您必須為.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不會喜歡你 。

您有兩種選擇：

1）如果瀏覽器兼容性不是問題，請使用Flexbox 。 另請參見兼容性表 。

 .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，因此應顯示為：

但是，問題是如果您做到了：

寬度：calc（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的左邊距空白（兩個元素，每個元素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/