Question

我想制作一个包含三列的定价表。如：

* Basic Package *        * BEST VALUE *         * Legendary 7 *
   Awesomeness              Awesome+               Awesome++
    24/7 Chat             Chat + Email           24/7 1-(800) #
      etc.                    etc.                   etc.

显然，＆＃34;最佳价值＆＃34;列将突出显示或通过某种颜色或特殊装饰聚焦。但是，我希望我的样式表适应不同数量的列。

这是我的HTML：

<div class="colx3 pricingPlan">
  <div class="plan">Basic</div>
  <div class="spotlight">Basic</div>
  <div class="plan">Basic</div>
</div>

此CSS 不起作用：

.pricingPlan>div {
  background:#999;
  display:inline-block;
  margin:0 auto;
}

.colx3>.plan, .colx3>.spotlight {
  width:33%;
}

这个CSS 确实有用：

.pricingPlan>div {
  background:#999;
  display:inline-block;
  margin:0 auto;
  width:33%;
}

.colx3>.plan, .colx3>.spotlight {
  /// EMPTY /////////
}

我不想将两个选择器组合在一组属性下，但我认为它应该按照我的方式工作。如何以两种不同的方式定义元素的样式？更重要的是，如何根据总列数（在类名colx3中定义）来调整列的大小。

Answer 1

您要做的是将<div>的列放在一行中。所以后面的CSS确实有效，因为在<div>中定义了display:inline-block; s属性float: left;，它们将它们彼此对齐，宽度为33％。如果您使用以前的CSS（您提到的不工作的CSS）并在选择器width:33%;中定义的宽度（.colx3>.plan, .colx3>.spotlight）之后添加display: table;，那么它将起作用。

Here是一个小提琴

为了根据行中的列数调整列的大小，您可以使用JavaScript（此处未提供）或仅使用CSS方法，通过使用display: table-cell;设置父元素和子列使用.clearfix也可能有用。

此外，还定义了<div>，以便在文档中添加更多{{1}}时，列不会分崩离析（只是一种故障安全技术）。

从CSS中的两个不同选择器中选择的元素。第一个是工作，但第二个不是

1 个答案: