html - CSS:如何仅调整右侧元素的大小？

Question

我想以这种方式显示价格和描述。当调整窗口宽度大小时，我只想调整中间部分(蓝色矩形内)的大小。

对于任何窗口尺寸，红色矩形的宽度都不应改变。

我尝试使用 <table>标记，但它使第一部分被包装。

这里是 HTML 片段:

<table class="notfootable">
    <tbody>
      <tr>
        <td><span class="usd">$</span><span class="monthly-cost">744.58</span></td>
        <td>
          <h4>Monthly Cost</h4>
          <p class="nomargin">This includes your Account's Subscription Plan as well as any Add-ons for your Account.</p>
        </td>
      </tr>
    </tbody>
</table>

请注意 <span class="usd">具有以下 CSS 属性。

.usd {   
    vertical-align: top;
    display: inline-block;
    font-size: 11px;
    color: #1587AC;
    margin-top: 0.3em;
}

我添加了 display: inline-block添加margin-top .

Answer 1

首先，您不希望它在 table 标记内形成。它里面不是管状数据。它的内容。

其次，flexbox 可以派上用场来解决您遇到的这个问题。它易于使用，并有许多选项可让您在 div 中将内容对齐到 x 轴和 y 轴。

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

您可以在 MDN 阅读有关 flexbox 的更多信息.

考虑到这一点，我制作了一个小示例来重现您想要实现的目标。

.container {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}
.info {
  display: flex;
}
.price {
  display: flex;
  align-items: center;
  padding-right: 30px;
}
.cta {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}
@media screen and (min-width: 600px) {
  .container {
    display: flex;
    width: 100%;
    align-items: center;
  }
  .info {
    width: 80%;
  }
  .cta {
    display: block;
    justify-content: initial;
    width: 20%;
    padding-left: 30px;
    box-sizing: border-box;
  }
}

<div class="container">
  <div class="info">
    <div class="price">
      <span class="usd">$</span><span class="monthly-cost">744.58</span>
    </div>
    <div class="description">
      <h4>Monthly Cost</h4>
      <p>This includes your Account's Subscription Plan as well as any Add-ons for your Account.</p>
    </div>
  </div>
  <div class="cta">
    <button>Billing details</button>
  </div>
</div>