Spaltenausrichtung mit calc()

Question

Ich möchte Spalten in Zeile relativ zu .container Block mit Calc(), aber nicht die richtige Breite messen.

Ich habe Formel width: calc(100%/number of boxes – total margin size) verwendet, aber es funktioniert nicht so, wie ich es erwarte. Rechts zu viel Platz vorhanden.

Ich denke, Problem ist auf meinem CSS aber kann nicht wo genau finden. Hoffe auf Ihre Hilfe :)

P.S. Set margin:0 für 1st .col-lg-4, aber es hat nicht geholfen.

Wie sieht es jetzt:

JSFiddle

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

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

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

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

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

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

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

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

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

 
.chicken { 
 
\t background-color: pink; 
 
} 
 

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

 
.sushi { 
 
\t 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

Nun das Hauptproblem bei der Berechnung ist, dass Sie die Randbreiten vor die Teilung zu subtrahieren haben.

so

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

und

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

Answer 2

Sie hatte die letzte Kind Stil für Ihre .lg und anzupassen .md s Iizes, das war die Ursache für die Lücke. Hier gehen Sie: 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

Ich wäre sehr vorsichtig mit dieser Methode. IE isn't going to like you.

Sie haben zwei Möglichkeiten:

1) Wenn Browser-Kompatibilität kein Problem ist, Flexbox zu verwenden. Siehe auch die 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) Wenn Browser compatibilty ein Problem, eine tabellarische Layout.

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

Es im Spiel drei Dinge, die sich hier:

Zuerst Ihre mathematischen verursacht dies:

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

Nach 3 Spalten, du hast 30 px an Breite verloren, Das ist was auf der rechten Seite hängt.

Da Sie nur 5px von margin-left, es sollte lauten:

jedoch das Problem dann ist, wenn Sie es machen:

Breite: ber (100%/3 - 5px);

Es scheint zu breit zu sein - aber das ist aufgrund des berüchtigten White-Space-Problems, das rund 4px des rechten Randes hinzugefügt wird, wenn Sie JEDEN Leerraum zwischen den Tags haben. Von Ihrem Code:

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

So, dann müssen Sie den weißen Raum säubern, etwa so:

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

Das eine verbleibende Punkt lässt: Ihre margin-left, die von entfernt werden muss das erste Element:

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

Was uns sehr nahe kommt, aber Sie haben ein weiteres Problem zu überwinden:

Sie haben insgesamt 10 Pixel Rand links (zwei Elemente, jeweils 5 Pixel), die nicht gleichmäßig durch 3 geteilt werden. Also, ich würde vorschlagen, es 12px (margin-left: 6px;) zu machen, so dass Sie Ihre Formel optimieren können, und ein gleichmäßiges Layout erhalten;

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

Hier ist eine Arbeits Geige:

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

Wie andere bemerkt haben, Flexbox ist wahrscheinlich dein Freund - obwohl es, wie Sie sieht sind Bootstrap verwenden, was bedeutet, du würdest müssen Ihren eigenen Flexbox-Code rollen.

Hier ist eine schnelle und unsaubere Flexbox Demo Ihrer bestehende Markup und kleinere Änderungen Stil: https://jsfiddle.net/cale_b/qbkw5qpu/1/