Question

<div class="col-md-4 order">
    <a class="aremove" href="/Channel/Details/273">
        <div class="thumbnail">
            <img src="../../Images/img/channelimages/imgB2B.png">
            <div class="caption">
                <p class="channel-stats-heading">
                    <b>B2BChannel</b>
                </p>
                <p class="color-grey">
                    <span>0</span> out of stock
                </p>
                <p class="color-grey">
                    <b>20</b> pending process
                </p>
                <p class="color-grey">
                    <span>1</span> this month
                </p>
            </div>
        </div>
    </a>
</div>

如何在CSS中将数字置于另一个之下？

Answer 1

您可以在span和b元素中添加一个浮点数。

p.color-grey span, p.color-grey b {
   float: left;
}

要将文本居中放在范围内，b可以为其添加一些宽度。

这是bin：JSBin

我认为这就是你所需要的。

Answer 2

根据您提供的最少信息，我将问题解释为＆＃34;如何将段落居中，同时对齐其他上方或下方的数字？＆＃34;我建议：

div.caption {
  /* to approximate the design you show in the picture,
     adjust to taste, irrelevant to the result: */
  width: 50%;
  border: 1px solid #ccc;
}
p.color-grey {
  /* to approximately-center the content: */
  margin-left: 40%;
  width: 50%;

  /* to allow for absolute positioning of the :first-child
     in relation to its parent: */
  position: relative;
}
p.color-grey >:first-child {
  position: absolute;
  font-weight: bold;

  /* to position the :first-child outside of the
     parent element, with the right-edge aligned: */
  right: 102%;

  /* to provide space between the number of the
     aligned element and the text of the parent
     element: */         
  padding-right: 0.3em;
}

＆＃13;

div.caption {
  width: 50%;
  border: 1px solid #ccc;
}
p.color-grey {
  margin-left: 40%;
  width: 50%;
  position: relative;
}
p.color-grey >:first-child {
  position: absolute;
  font-weight: bold;
  right: 102%;
  box-sizing: border-box;
  padding-right: 0.3em;
}

＆＃13;

<div class="caption">
  <p class="color-grey"><span>0</span> out of stock</p>
  <p class="color-grey"><b>20</b> pending process</p>
  <p class="color-grey"><span>1</span> this month</p>
</div>

＆＃13;

外部JS Fiddle demo用于实验和开发。

在不同的段落中将文本值一个放在另一个下面

2 个答案: