html - 我如何控制一行的高度

Question

我正在制作类似于 https://products.office.com/en-US/compare-all-microsoft-office-products?tab=2 的东西

我正在使用这个主题 http://preview.themeforest.net/item/trizzy-multipurpose-ecommerce-html-template/full_screen_preview/7950329我正在使用的定价表在简码下 --> 定价表

http://77.104.156.45/~mdsc1109/office365.php是我到现在为止所做的。向下滚动并点击商业计划的立即购买

代码是:-

<div class="plan color-1 four columns">
  <div class="plan-price" style="visibility: hidden">
    <h3>Standard<br>Standard</h3>
    <span class="plan-currency">$</span>
    <span class="value">19,90</span>
    <span class="period">/ per month</span>
  </div>
  <div class="plan-features">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
</div>
<div class="plan color-1 four columns">
  <div class="plan-price">
    <h3>Office 365<br>Business</h3>
    <span class="plan-currency">$</span>
    <span class="value">19,90</span>
    <span class="period">/ per month</span>
  </div>
  <div class="plan-features">
    <ul>
      <li>Best for businesses that need Office applications plus cloud file storage and sharing. Business email not included.</li>
      <li>10 Email Accounts</li>
      <li>5GB Monthly Bandwidth</li>
      <li>Unlimited Subdomains</li>
      <li>Automatic Cloud Backup</li>
    </ul>
  </div>
</div>
<div class="plan color-1 four columns">
  <div class="plan-price">
    <h3>Office 365<br>Business Premium</h3>
    <span class="plan-currency">$</span>
    <span class="value">19,90</span>
    <span class="period">/ per month</span>
  </div>
  <div class="plan-features">
    <ul>
      <li>Best for businesses that need business email, Office applications, and other business services.</li>
      <li>10 Email Accounts</li>
      <li>5GB Monthly Bandwidth</li>
      <li>Unlimited Subdomains</li>
      <li>Automatic Cloud Backup</li>
    </ul>
  </div>
</div>
<div class="plan color-1 four columns">
  <div class="plan-price">
    <h3>Office 365<br>Business Essentials</h3>
    <span class="plan-currency">$</span>
    <span class="value">19,90</span>
    <span class="period">/ per month</span>
  </div>
  <div class="plan-features">
    <ul>
      <li>Best for businesses that need business email and other business services. Office applications not included.</li>
      <li>10 Email Accounts</li>
      <li>5GB Monthly Bandwidth</li>
      <li>Unlimited Subdomains</li>
      <li>Automatic Cloud Backup</li>
    </ul>
  </div>
</div>

我如何控制间距以便我可以制作行？例如，我想在 3 列中的每个“最适合需要...的企业”的上方和下方放置间隙，在其下方我想在每一列中放置“包含的 Office 应用程序”，我希望它们全部相同像微软网站上的行

这样做的一种方法是在每一列中添加空 li、填充顶部或填充底部，我必须对每一行重复它。这是一个糟糕的方法，因为如果我在任何地方更改文本，那么间隙就会变得困惑，我必须调整每一列中的间隙

有更好的方法吗？我可以向最左边的 1、2、3、4... 添加样式，然后使用这些样式控制整行的间距吗？例如，我将高度设置为 1，该高度适用于整行。如果是，那我该怎么做？我不确定在当前代码结构中是否可行。这是因为每一列都在一个 div 中，所以我添加到列中的任何样式只会影响该列所在的 div，而不会以另一种方式影响列，所以唯一的选择就是做坏事我不想做

Answer 1

您可能需要查看Flexbox 布局，因为它可以解决您的具体情况。在我看来，这是关于 Flexbox 的最佳文章/教程:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

实际上，如果您查看作为示例发布的链接(Office 产品页面)，他们也在使用 Flexbox。打开检查器并查看样式，这正是您要复制的样式。

在您的代码中，您有一个“容器”，然后是显示为列的四个 div:

<div class="container" style="padding-top: 20px">

            <div class="four columns">
                <div class="content-box">
                    <h3>Business Plan</h3>
                    <p>text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.</p>
                    <br>
                    <a id="bp">Buy Now</a>
                </div>
            </div>
            <div class="four columns">
                <div class="content-box">
                    <h3>Exchange Plan</h3>
                    <p>text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.</p>
                    <br>
                    <a id="exp">Buy Now</a>
                </div>
            </div>
            <div class="four columns">
                <div class="content-box">
                    <h3>Enterprise Plan</h3>
                    <p>text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.</p>
                    <br>
                    <a id="enp">Buy Now</a>
                </div>
            </div>
        <div class="four columns">
            <div class="content-box">
                <h3>Education Plan</h3>
                <p>text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.</p>
                <br>
                <a id="edp">Buy Now</a>
            </div>
        </div>

    </div>

那么试试这个 CSS:

.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

另请查看此交互式演示，您可以在其中了解如何更改容器内 flex 元素的方向:

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

在你的情况下，你希望你的元素是列，但如果你希望它们是行，你可以通过这样做来实现:

flex-direction: row;

最后，为了“控制差距”，你可以使用这个:

https://css-tricks.com/almanac/properties/j/justify-content/

使用 justify-content，您可以控制元素对齐方式。它接受这些值:

• flex-start(默认):元素被打包到起始行
• flex-end: 元素被打包到最后一行
• center:元素沿线居中
• space-between:元素在行中均匀分布；第一项在开始行，最后一项在末尾
• line space-around:元素均匀分布在一行中他们周围的空间相等
• 空间均匀:元素分布以便任何两个相邻对齐主题之间的间距，在第一个对齐主题，最后一个对齐主题之后是一样

在这里您可以看到它的实际效果:

justify-content

希望对您有所帮助!