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轴上对齐。

CSS3 Flexible Box 或 flexbox ，是一种布局模式，提供在页面上排列元素以使元素表现出来可预见的是，页面布局必须适应不同的屏幕尺寸和不同的显示设备。

您可以在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>

Answer 2

我相信要完成此操作，您可以在蓝色矩形周围的position: absolute上使用<div>，并在该元素周围的父容器上使用position:relative。在该容器内的所有其他元素上使用position: relative。

这是一个与你有些类似的问题： DIV absolute positioning - maintain position after browser window resize

希望这有帮助。

Answer 3

附上＆＃34; usd＆＃34;和＆＃34;每月费用＆＃34;在div中，显示属性为＆＃34; inline-block＆＃34;和足够宽的固定宽度，以适应最宽的成本金额显示。当显示宽度减小时，这应该保持这两个跨距内联。

Answer 4

您可以使用如下的flex布局： HTML：

<div class="main">
  <div class="left">
    <span class="usd">$</span><span class="monthly-cost">744.58</span>
  </div>
  <div class="right">
    <div class="right-top">
      <h4>Monthly Cost</h4>
      <p class="nomargin">This includes your Account's Subscription Plan as well as any Add-ons for your Account.</p>
    </div>
    <div class="right-bottom">
      <button>billing details</button>
    </div>
</div>

CSS：

.main {
 display: flex;
 flex-direction: row;
}

.left {
  align-self: center;
  padding-right: 55px;
}

.right {
  flex-direction:column;
}

有关flex布局的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS：如何仅调整右侧元素的大小？

4 个答案: