html - 如何使用 CSS 创建特定风格的多行文本框？

Question

我的任务是使用 CSS 创建一个风格化的文本框，如下所示:

我曾是许多网站的服务器开发人员，偶尔也会接触 CSS，而且通常会以一种相当干净的方式解决问题。然而，我真的被这个问题困住了——我花了一个小时的时间慢慢解决问题，才开始让它继续下去。

我还没有开始着色或边框。现在，我一直在尝试垂直 放置第一行文本。我宁愿不强制任何文本行的 height 或 width，因为在我看来，如果文本/大小略有变化，这可能会破坏。

相反，我宁愿使用诸如 centering 和 vertical-align: top; 等语义(至少部分)。

这个问题的绿色着色是可选的。我更关心文本的定位。另外，请不要担心字体的选择(我希望自己能够解决这个问题)- 但字体大小(和粗体)很重要。

我尝试的 CSS 的当前状态如下所示 - 它不起作用。我当前的 CSS(如下)使页面上的图像看起来像这样:

(蓝色着色只是 Chrome Web Developer 突出显示，我提供它是为了指示包含第一行文本的 div 的大小。实际背景颜色是白色。)

在上图中，我还没有开始担心着色或边框。上图的当前状态是我只是试图让文本 "CLICK HERE for a" 出现在其 div 的顶部 - 如前所述，没有设置高度或宽度如果可能，div 将“折叠”到文本上。

我目前在垂直定位“点击这里查看”文本时遇到的问题只是我一直在处理的一个问题。我想要一个完整的工作示例，该图像的文本和文本定位，以“正确的方式”完成(或至少以不错的方式完成)。也许正确的方法确实是设置click-here-for-a 宽度和高度 div (请参阅下面的 CSS)几乎等于文本尺寸，以强制其 absolute 定位(但如前所述，我宁愿不这样做，除非这里的答案纠正了我，告诉我这是一个很好的方法)。

这是上面(不正确的)图像的 HTML/CSS:

HTML:

<div class="smooth-click-region">
    <div class="click-here-for-a">
        CLICK HERE for a
    </div>
    <div class="intro-offer-on-home-delivery">
        <div class="intro-offer">Special Introductory Offer</div>
        <div class="on-home-delivery">on Home Delivery</div>
    </div>
    <div class="discount-description">2 weeks @ 30% off - as low as $78/week</div>
</div>

CSS:

.intro-offer-smooth-click-region {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 258px;
    height: 61px;
}

.click-here-for-a {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    vertical-align: top;
    font-size: 8pt;
}

.intro-offer-on-home-delivery {
    font-size: 9pt;
    text-align: center;
}

.intro-offer {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.on-home-delivery {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.discount-description {
    position: absolute;
    font-size: 9pt;
    height: 12px;
}

使用 CSS 创建上图的正确方法是什么 - 至少在文本格式和定位方面？

Answer 1

应您的要求作为答案发布。它有助于在您想要独立设置样式的单行文本周围添加 span 标签。

JSFiddle Example

HTML:

<div class="smooth-click-region">
    <div class="click-here-for-a">
        <span>CLICK HERE</span> for a
    </div>
    <div class="intro-offer-on-home-delivery">
        <div class="intro-offer">Special Introductory Offer</div>
        <div class="on-home-delivery">on Home Delivery</div>
    </div>
    <div class="discount-description">2 weeks @ 30% off - as low as $78/week</div>
</div>

CSS:

.smooth-click-region {
    display: inline-block;
    overflow: hidden;
    width: 258px;
    height: 61px;
    background: #cebd44;
    border: inset 1px dotted;
    border-style: double;
}

.click-here-for-a span {
    font-weight: bold;
}

.click-here-for-a {
    display: block;
    text-align: center;
    vertical-align: top;
    font-size: 8pt;
}

.intro-offer-on-home-delivery {
    font-size: 9pt;
    text-align: center;
    font-weight: bold;
}

.intro-offer {
    margin-left: auto;
    margin-right: auto;
}

.on-home-delivery {
    margin-left: auto;
    margin-right: auto;
}

.discount-description {
    font-size: 9pt;
    height: 12px;
    text-align: center;
}