วิธีจัดแนว 3 divs (ซ้าย / กลาง / ขวา) ภายใน div อื่น

392

ฉันต้องการจัดให้ 3 divs อยู่ภายใน container div อย่างนี้:

[[LEFT]       [CENTER]        [RIGHT]]

div คอนเทนเนอร์กว้าง 100% (ไม่มีความกว้างที่ตั้งไว้) และ div center ควรอยู่ในกึ่งกลางหลังจากปรับขนาดคอนเทนเนอร์

ดังนั้นฉันจึงตั้ง:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

แต่มันจะกลายเป็น:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

เคล็ดลับใด ๆ

— Serg
แหล่งที่มา

1

หากคอนเทนเนอร์แคบกว่า 300px กว้างนั่นจะเกิดขึ้นเว้นแต่ว่าคุณจะตั้งค่าคุณสมบัติโอเวอร์โฟลว์

— inkedmn

Flexbox และ Grid: jsfiddle.net/w0s4xmc0/12963

— Manoj Kumar

เพิ่งทราบ - ตามความคิดเห็นของ @ inkedmn ด้วยเนื้อหามากมายในแต่ละคอลัมน์ฉันไม่สามารถให้พวกเขาทั้งหมดจัดแนวอย่างถูกต้องที่ความกว้างคอนเทนเนอร์ใด ๆ โดยไม่ต้องoverflow: hidden;อยู่ในcenterคอลัมน์ จากนั้นในการสืบค้นสื่อสำหรับอุปกรณ์ขนาดเล็กเมื่อฉันมีทั้ง 3 คอลัมน์อยู่ตรงกลางที่ด้านบนของกันและกันฉันต้องการoverflow: hidden;แถวกลาง (ซึ่งเป็นคอลัมน์ด้านขวาของอุปกรณ์ขนาดใหญ่) ไม่เช่นนั้นจะไม่มีความสูงและไม่อยู่กึ่งกลางในแนวตั้ง ระหว่างแถวบนและแถวล่าง

— Chris L

364

ด้วย CSS นั้นให้ใส่ div ของคุณอย่างนั้น (ลอยก่อน):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

ป.ล.คุณสามารถลอยตัวไปทางขวาแล้วซ้ายจากนั้นก็อยู่กึ่งกลาง สิ่งสำคัญคือลอยมาก่อนส่วนศูนย์ "หลัก"

PPSคุณมักต้องการข้อมูลล่าสุดใน#containerตัวอย่างนี้: <div style="clear:both;"></div>ซึ่งจะขยายใน#containerแนวตั้งเพื่อให้มีทั้งสองด้านลอยแทนที่จะใช้ความสูงของมันเท่านั้น#centerและอาจทำให้ด้านข้างยื่นออกมาด้านล่าง

— dkamins
แหล่งที่มา

คุณจะทำอย่างไรถ้าตู้ไม่ได้ 100%? ฉันกำลังลองอะไรแบบนี้ที่นี่ฉันต้องการ div อยู่ด้านขวาของภาชนะบรรจุ แต่มันลอยไปทางขวาของหน้า

— Tiago

@ ติอาโก้: การลอยตัวยังคง จำกัด อยู่กับ div หากพวกมันอยู่ข้างใน border:solidตรวจสอบสิ่งที่ความกว้างของภาชนะโดยการตั้งค่าให้ หากเป็น 100% ให้ล้อมรอบมันลงใน div อื่นเพื่อวางตำแหน่งไว้ในหน้าของคุณ

— James P.

นอกจากนี้ - หากคุณวางสิ่งเหล่านี้ไว้ในภาชนะที่ปรับขนาดได้ตรวจสอบให้แน่ใจว่าได้ตั้งค่าความกว้างขั้นต่ำของภาชนะเพื่อป้องกันไม่ให้ตัว div ที่ลอยอยู่ด้านขวาถูกกดลง

— Tapefreak

6

คำตอบนี้มีอายุมากกว่าหกปี ในปี 2559 คำตอบที่ถูกต้องคือ flexbox

1

@torazaburo อาจมีคำตอบที่ถูกต้องมากกว่าหนึ่งคำตอบมีหลายวิธีที่จะไปถึงจุดเดียวกันในกรณีนี้ฉันต้องใช้วิธีแก้ปัญหานี้เพราะกรอบงานที่ฉันใช้แล้วตั้งค่าไปทางซ้ายและขวาด้วย float ถึงองค์ประกอบเพียง การเพิ่มองค์ประกอบกึ่งกลางในตอนท้ายนั้นสมบูรณ์แบบสำหรับฉัน

— Ninja Coding

128

หากคุณไม่ต้องการเปลี่ยนโครงสร้าง HTML ของคุณคุณสามารถทำได้โดยการเพิ่มtext-align: center;องค์ประกอบ wrapper และ a display: inline-block;ไปยังองค์ประกอบกึ่งกลาง

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

การสาธิตสด: http://jsfiddle.net/CH9K8/

— fruechtemuesli
แหล่งที่มา

1

นี่เป็นทางออกเดียวที่ปรับขนาดได้อย่างเหมาะสมกับความกว้างของหน้าต่างโดยไม่พับเร็ว

— Jared Sealey

2

มันสมบูรณ์แบบเมื่อขนาดซ้ายและขวาเท่ากัน มิเช่นนั้น Center จะไม่อยู่กึ่งกลาง

— mortalis

127

การจัดแนวสาม Divs ในแนวนอนโดยใช้ Flexbox

นี่คือวิธี CSS3 สำหรับจัดแนว divs ในแนวนอนภายใน div อื่น

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

ขยายตัวอย่างข้อมูล

jsFiddle

justify-contentคุณสมบัติใช้เวลาห้าค่า:

flex-start (ค่าเริ่มต้น)
flex-end
center
space-between
space-around

ในทุกกรณี div สามตัวจะอยู่ในบรรทัดเดียวกัน สำหรับคำอธิบายของแต่ละค่าดูที่: https://stackoverflow.com/a/33856609/3597276

ประโยชน์ของ flexbox:

รหัสน้อยที่สุด; มีประสิทธิภาพมาก
การจัดกึ่งกลางทั้งแนวตั้งและแนวนอนนั้นง่ายและสะดวก
คอลัมน์ความสูงเท่ากันนั้นง่ายและสะดวก
หลายตัวเลือกสำหรับการจัดตำแหน่งองค์ประกอบแบบยืดหยุ่น
มันตอบสนอง
แตกต่างจากการลอยและตารางซึ่งมีความสามารถในการจัดวางที่ จำกัด เนื่องจากไม่ได้มีจุดประสงค์เพื่อสร้างเลย์เอาต์ flexbox เป็นเทคนิคที่ทันสมัย (CSS3) พร้อมตัวเลือกที่หลากหลาย

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการเยี่ยมชมเฟล็กบ็อกซ์:

วิธีการจัดแนวรายการ Flex
การใช้ CSS กล่องที่ยืดหยุ่น ~ MDN
คู่มือฉบับสมบูรณ์สำหรับ Flexbox ~ CSS-Tricks
Flexbox คืออะไร! ~ วิดีโอสอนบน YouTube

การสนับสนุนเบราเซอร์: flexbox รับการสนับสนุนจากเบราว์เซอร์ที่สำคัญทั้งหมดยกเว้น IE <10 บางรุ่นเบราว์เซอร์ที่ผ่านมาเช่น Safari 8 และ IE10 ต้องคำนำหน้าของผู้ขาย หาวิธีที่รวดเร็วเพื่อเพิ่มคำนำหน้าใช้Autoprefixer รายละเอียดเพิ่มเติมในคำตอบนี้

— Michael Benjamin
แหล่งที่มา

7

ความยืดหยุ่นดีกว่าการใช้ลูกลอย

— Faizan Akram Dar

1

คำอธิบายที่ดีในที่นี่และในโพสต์ที่เชื่อมโยง! ข้อความแสดงข้อผิดพลาด:การใช้องค์ประกอบ "span" เป็นไอเท็ม flex ภายในคอนเทนเนอร์ div ทำงานใน firefox แต่ไม่ได้ทำงานในเบราว์เซอร์ที่ใช้ javafx (webview) การเปลี่ยน "ช่วง" เป็น "divs" ใช้ได้ทั้งคู่

— Ashok

Internet Explorer 10 และรุ่นก่อนหน้านี้ไม่รองรับคุณสมบัติ justify-content

— D.Snap

1

ขออภัยนี่ใช้ได้กับรายการที่มีความกว้างเท่ากันเท่านั้น ดูstackoverflow.com/questions/32551291/…

— จัดการ

ยอดเยี่ยมฉันลองใช้วิธีแก้ปัญหาทั้งหมดที่นี่และนี่คือทางออกที่ดีที่สุด!

— Nico Müller

22

คุณสมบัติ Float ไม่ได้ใช้เพื่อจัดแนวข้อความ

คุณสมบัตินี้ใช้เพื่อเพิ่มองค์ประกอบไปทางขวาหรือซ้ายหรือกึ่งกลาง

div > div { border: 1px solid black;}

<html>
     <div>
         <div style="float:left">First</div>
         <div style="float:left">Second</div>
         <div style="float:left">Third</div>

         <div style="float:right">First</div>
         <div style="float:right">Second</div>
         <div style="float:right">Third</div>
     </div>
</html>

ขยายตัวอย่างข้อมูล

สำหรับfloat:leftผลลัพธ์จะเป็น[First][second][Third]

สำหรับfloat:rightผลลัพธ์จะเป็น[Third][Second][First]

นั่นหมายถึง float => คุณสมบัติด้านซ้ายจะเพิ่มองค์ประกอบถัดไปของคุณไปทางซ้ายของหน้าที่ก่อนหน้านี้กรณีเดียวกันกับด้านขวา

นอกจากนี้คุณต้องพิจารณาความกว้างขององค์ประกอบหลักถ้าผลรวมของความกว้างขององค์ประกอบลูกเกินความกว้างขององค์ประกอบหลักแล้วองค์ประกอบถัดไปจะถูกเพิ่มที่บรรทัดถัดไป

 <html>
     <div style="width:100%">
       <div style="float:left;width:50%">First</div>
       <div style="float:left;width:50%">Second</div>
       <div style="float:left;width:50%">Third</div>
     </div>
</html>

ขยายตัวอย่างข้อมูล

[แรก] [ที่สอง]

[สาม]

ดังนั้นคุณต้องพิจารณาทุกแง่มุมเหล่านี้เพื่อให้ได้ผลลัพธ์ที่สมบูรณ์แบบ

— Rajiv Pingale
แหล่งที่มา

13

ฉันชอบแท่งของฉันแน่นและมีชีวิตชีวา นี่สำหรับ CSS 3 & HTML 5

ก่อนอื่นการตั้งค่าความกว้างเป็น 100px กำลัง จำกัด อย่าทำมัน
ประการที่สองการตั้งค่าความกว้างของคอนเทนเนอร์เป็น 100% จะใช้งานได้จนกว่าจะพูดถึงว่ามันเป็นแถบส่วนหัว / ท้ายกระดาษสำหรับแอปทั้งหมดเช่นการนำทางหรือแถบเครดิต / ลิขสิทธิ์ ใช้right: 0;แทนภาพจำลองนั้น
คุณกำลังใช้ ID ของ (กัญชา#container, #leftฯลฯ ) แทนการเรียน ( .container, .leftฯลฯ ) ซึ่งเป็นที่ดีถ้าคุณต้องการที่จะทำซ้ำรูปแบบสไตล์ของคุณที่อื่น ๆ ในรหัสของคุณ ฉันจะพิจารณาใช้คลาสแทน
สำหรับ HTML ไม่จำเป็นต้องสลับลำดับสำหรับ: left, center, & right display: inline-block;แก้ไขสิ่งนี้ส่งคืนรหัสของคุณไปยังบางสิ่งที่สะอาดขึ้น
<div>สุดท้ายคุณต้องล้างลอยขึ้นมาเพื่อที่จะไม่ยุ่งกับอนาคต คุณทำเช่นนี้กับclear: both;

เพื่อสรุป:

HTML:

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

CSS:

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }

คะแนนโบนัสหากใช้ HAML และ SASS;)

HAML:

.container
  .left
  .center
  .right
  .clear

SASS:

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}

— Eric Wanchic
แหล่งที่มา

12

มีลูกเล่นมากมายสำหรับการจัดองค์ประกอบ

01. การใช้ตารางเคล็ดลับ

แสดงตัวอย่างโค้ด

.container{
  display:table;
 }

.left{
  background:green;
  display:table-cell;
  width:33.33vw;
}

.center{
  background:gold;
  display:table-cell;
  width:33.33vw;
}

.right{
  background:gray;
  display:table-cell;
  width:33.33vw;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

ขยายตัวอย่างข้อมูล

02. ใช้ Flex Trick

แสดงตัวอย่างโค้ด

.container{
  display:flex;
  justify-content: center;
  align-items: center;
   }

.left{
  background:green;
  width:33.33vw;
}

.center{
  background:gold;
   width:33.33vw;
}

.right{
  background:gray;
   width:33.33vw;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

ขยายตัวอย่างข้อมูล

03. การใช้เคล็ดลับลอย

แสดงตัวอย่างโค้ด

.left{
  background:green;
  width:100px;
  float:left;
}

.center{
   background:gold;
   width:100px;
   float:left;
}

.right{
   background:gray;
   width:100px;
   float:left;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

ขยายตัวอย่างข้อมูล

— Santosh Khalse
แหล่งที่มา

11

สิ่งนี้สามารถทำได้อย่างง่ายดายโดยใช้ CSS3 Flexbox ซึ่งเป็นคุณสมบัติที่จะใช้ในอนาคต (เมื่อ<IE9ตายโดยสิ้นเชิง) เกือบทุกเบราว์เซอร์

ตรวจสอบตารางความเข้ากันได้ของเบราว์เซอร์

HTML

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

CSS

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

เอาท์พุท:

แสดงตัวอย่างโค้ด

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

/* For Presentation, not needed */

.container > div {
  background: #5F85DB;
  padding: 5px;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

ขยายตัวอย่างข้อมูล

— มาโนจมาร์
แหล่งที่มา

4

ด้วย bootstrap Twitter:

<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>

— ลำลูกกา
แหล่งที่มา

3

คำตอบที่เป็นไปได้ถ้าคุณต้องการเก็บคำสั่งของ html และไม่ใช้ flex

HTML

<div class="a">
  <div class="c">
    the 
  </div>
  <div class="c e">
    jai ho 
  </div>
  <div class="c d">
    watsup
  </div>
</div>

CSS

.a {
  width: 500px;
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  display: table;
}

.c {
  display: table-cell;
  width:33%;
}

.d {
  text-align: right;
}

.e {
  position: absolute;
  left: 50%;
  display: inline;
  width: auto;
  transform: translateX(-50%);
}

ลิงค์ปากการหัส

— Pruthvi P
แหล่งที่มา

2

HTML:

<div id="container" class="blog-pager">
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="center">Center</div>    
</div>

CSS:

 #container{width:98%; }
 #left{float:left;}
 #center{text-align:center;}
 #right{float:right;}

text-align:center; ให้การจัดตำแหน่งศูนย์สมบูรณ์แบบ

การสาธิต JSFiddle

— คาลิดฟาฮาน
แหล่งที่มา

มันจะจัดวาง div ไว้ในตัวอย่างของคุณเนื่องจากอิลิเมนต์ข้อความมีขนาดใกล้เคียงกันทำให้ข้อความยาวขึ้นและ #center div ไม่อยู่ในกึ่งกลางอีกต่อไป: jsfiddle.net/3a4Lx239

— Kai Noack

1

ฉันพยายามอีกครั้งเพื่อทำให้สิ่งนี้ง่ายขึ้นและบรรลุผลโดยไม่จำเป็นต้องมีคอนเทนเนอร์

HTML

.box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

CSS

  .box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

คุณสามารถดูได้ที่JSFiddle

— user15100
แหล่งที่มา

1

การใช้Bootstrap 3ฉันสร้างความกว้างเท่ากัน 3 divs (ในรูปแบบ 12 คอลัมน์ 4 คอลัมน์สำหรับแต่ละ div) วิธีนี้คุณสามารถทำให้ศูนย์กลางส่วนกลางของคุณอยู่ตรงกลางแม้ว่าส่วนซ้าย / ขวาจะมีความกว้างแตกต่างกัน (หากพวกเขาไม่ล้นพื้นที่คอลัมน์ของพวกเขา)

HTML:

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

CSS:

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

CodePen

ในการสร้างโครงสร้างนั้นโดยไม่ต้องใช้ไลบรารีฉันได้คัดลอกกฎบางอย่างจาก Bootstrap CSS

HTML:

<div id="container">
  <div id="left" class="col">Left</div>
  <div id="center" class="col">Center</div>
  <div id="right" class="col">Right</div>
</div>

CSS:

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

CopePen

— mortalis
แหล่งที่มา

0

นี่คือการเปลี่ยนแปลงที่ฉันต้องทำกับคำตอบที่ยอมรับได้เมื่อฉันทำสิ่งนี้ด้วยรูปภาพเป็นองค์ประกอบศูนย์กลาง:

ตรวจสอบให้แน่ใจว่าภาพนั้นอยู่ใน div ( #centerในกรณีนี้) หากไม่เป็นเช่นนั้นคุณจะต้องตั้งค่าdisplayเป็นblockและมันดูเหมือนว่าจะศูนย์เทียบกับช่องว่างระหว่างองค์ประกอบลอยที่
ตรวจสอบให้แน่ใจว่าได้ตั้งขนาดของรูปภาพและคอนเทนเนอร์แล้ว:
```
#center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}
```

— แซม
แหล่งที่มา

0

คุณสามารถลองสิ่งนี้:

รหัส html ของคุณเช่นนี้:

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

และรหัส css ของคุณเช่นนี้:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

ดังนั้นเอาต์พุตควรเป็นดังนี้:

[[LEFT]       [CENTER]        [RIGHT]]

— kishan Radadiya
แหล่งที่มา

-1

.processList
  text-align: center
  li
  .leftProcess
    float: left
  .centerProcess
    float: none
    display: inline-block
  .rightProcess
    float: right

html
ul.processList.clearfix
  li.leftProcess

li.centerProcess
li.rightProcess

— shubham
แหล่งที่มา

2

ยินดีต้อนรับสู่ Stack Overflow! โปรดเพิ่มคำอธิบายว่าทำไมรหัสนี้ช่วย OP สิ่งนี้จะช่วยให้คำตอบในอนาคตที่ผู้ชมสามารถเรียนรู้ได้ ดูวิธีการตอบคำถามสำหรับข้อมูลเพิ่มเติม

— นอกรีต Monkey

-3

คุณทำมันถูกต้องคุณจะต้องล้างทุ่นของคุณ เพียงเพิ่ม

overflow: auto;

ไปยังคลาสคอนเทนเนอร์ของคุณ

— Mustapha ZEGAOULA
แหล่งที่มา

-6

ทางออกที่ง่ายที่สุดคือการสร้างตารางที่มี 3 คอลัมน์และจัดกึ่งกลางของตารางนั้น

HTML:

 <div id="cont">
        <table class="aa">
            <tr>
                <td>
                    <div id="left">
                        <h3 class="hh">Content1</h3>
                        </div>
                    </td>
                <td>
                    <div id="center">
                        <h3 class="hh">Content2</h3>
                        </div>
                 </td>
                <td>
                    <div id="right"><h3 class="hh">Content3</h3>
                        </div>
                </td>
            </tr>
        </table>
    </div>

CSS:

#cont 
{
  margin: 0px auto;    
  padding: 10px 10px;
}

#left
{    
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#center
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#right
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

— Sthembiso F. Makhathini
แหล่งที่มา

-10

#warpcontainer  {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }

— ไบต์
แหล่งที่มา

2

แทนที่จะโพสต์บล็อกรหัสเท่านั้นโปรดอธิบายว่าเพราะเหตุใดรหัสนี้จึงแก้ปัญหาที่เกิดขึ้น หากไม่มีคำอธิบายนี่ไม่ใช่คำตอบ

— Martijn Pieters