2

我正在使用骨架。我使用三分之一列三次。但是第三个不在同一条线上，并且正在脱离该行。它在下一行。第一列之前还有一个空格。

在此处输入图像描述

我正在使用以下 HTML 代码！

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="one-third column feature">
  <h2>Feature</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
  <h2>Perfomance</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
  <h2>Trial</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>

4

3 回答 3

2

每列的默认值margin-left是.column，4%所以加起来就是。那就是将最后一列推到下一行。width30.6667%(30.6667% + 4%) * 3 = 104.0001%

您需要覆盖margin-leftto 2.6%，这将加起来(30.6667% + 2.6%) * 3 = 99.8001%

.column {
  margin-left: 2.6% !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="one-third column feature">
  <h2>Feature</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
  <h2>Perfomance</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
  <h2>Trial</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>

于 2015-01-17T12:17:45.090 回答
0

I had the same problem. The solution is wrapping these 3 "one-third column" with ... columns here ..

@chipChocolate we use CSS frameworks for avoiding this kind of detailed calculations. adding row is framework's provided way.

I hope this helps

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="row"><!-- row for one-third -->
<div class="one-third column feature">
  <h2>Feature</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
  <h2>Perfomance</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
<div class="one-third column feature">
  <h2>Trial</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.</p>
</div>
</div><!-- End of row -->

于 2015-12-18T00:20:27.653 回答
-1

只需将您的代码放在 <div class="row">和之间</div>

于 2015-03-02T21:40:55.033 回答