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，我使用的定价表是在短代码下 - ＆gt;定价表

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/

Flexbox布局（灵活盒）模块（目前是W3C Last Call 工作草案旨在提供一种更有效的布局方式，在容器中的项目之间对齐和分配空间，即使它们是大小是未知的和/或动态的（因此单词＆＃34; flex＆＃34;）。

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

在您的代码中，您有一个＆＃34;容器＆＃34;然后是四个显示为列的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;

最后，要控制差距＆＃34;，您可以使用：

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

使用justify-content，您可以控制项目的对齐方式。它接受这些值：

flex-start（默认值）：项目朝着起始行打包
flex-end：项目被打包到终点
center：项目沿着这条线居中
space-between：项目均匀分布在行中;第一项是在起始行，最后一项在最后
行间距：项目均匀分布在行中他们周围的空间相等
空间均匀：物品分布如此在任何两个相邻的对齐主体之间的间距第一个对齐主题，并在最后一个对齐主题之后相同

在这里你可以看到它的实际效果：

justify-content

我希望它有所帮助！

如何控制行的高度

1 个答案: