html - Pure.css 1-3 网格每行只显示 2 个元素

Question

计划是让所有三位私有(private)教练都排在同一条线上，
但不知何故 Pure 每行只显示 2 个元素，尽管有足够的空间容纳第三个。

我已经删除了填充，不应该有任何额外的边距导致这个问题。

我该如何解决这个问题？

HTML

<section id="pt">
                <h2>Personal Trainer </h2>

                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet dapibus quam, sit amet tempor felis egestas et. In eu metus ultrices, 
                    luctus nunc egestas, euismod magna. 
                    Pellentesque ex nunc, sodales et ultricies id
                </p>

                <div class="pt-holder pure-u-1-3">

                <img src="Images/pt/img3.jpg" />

                <span> 

                    Just some Lorem Ipsum here.

                </span>


                </div>

                <div class="pt-holder pure-u-1-3">

                <img src="Images/pt/img2.jpg" alt="Jenni Tuokko" />

                <span> 

                    Just some Lorem Ipsum here.

                </span>


                </div>

                <div class="pt-holder pure-u-1-3">

                <img src="Images/pt/img1.jpg" alt="Jenni Tuokko" />

                <span> 

                   Just some Lorem Ipsum here.

                </span>

CSS

.pt-holder {
max-width: 100%;
height: auto;
margin: 0 auto;
display: block;
}

.pt-holder img {
border-radius: 100%;
width: 120px;
height: 120px;
display: block;
margin: 0 auto;
}

.pt-holder span {
display: block;
padding: 30px;
width: 90%;
text-align: center;
}

Answer 1

在包含所有列的元素上添加 pure-g 类。