html - CSS:如何使我的文本固定到窗口大小？

Question

我的问题是，当我调整窗口大小时，我不希望我的文本像图像一样移动。

我尝试使用 <div>带有 left 的容器属性等等，但是我无法实现我正在寻找的结果。

我有以下 CSS:

body {
    background-color: #204f6e;
    background-image: asset-url('beige_paper.png');
    background-position: top left;
    background-repeat: repeat;
}
#div1 {
    visibility:show;
    left: 606px;
    top: 59px;
    z-index:200;
}
.image1 {
    height: 9.65em;
}
#div2 {
    visibility:show;
    left: 187px;
    top: 218px;
    z-index:200;
}
#div3 {
    visibility:show;
    left: 185px;
    top: 305px;
    right: 200px;
    z-index:200;
}
#div4 {
    visibility:show;
    left: 215px;
    top: 390px;
    right: 200px;
    z-index:200;
}

我有以下 HTML:

<div id="div1">
    <%=i mage_tag( "logo.png", :class=>"image1") %>
</div>

<br />

<div class="contents" id="div2">
     <h1>
         <p>
             <span style="color: #008080;">
                 <strong>
                     <span style="font-size: 60px;">Some text</span>
                 </strong>
             </span>
         </p>
     </h1>
</div>

<div class="contents" id="div3">
    <p> 
        <span style="font-size: 11px; color: #808080;">
            <span style="font-size: 30px;">
                Some text
            </span>
            <br />
        </span>
    </p>
</div>

<div class="contents" id="div4">
    <p> 
        <span style="font-size: 24px; color: #808080;">
            Some text
        </span>
    </p>
</div>

这是 JSfiddle

Answer 1

问题不是很清楚，但有几种方法可以解决。

静态宽度

您可以为元素使用静态宽度。例如:

html { width: 1200px; }

将使您的整个页面始终为 1200 像素宽。替代html对于您想要的任何元素、ID 或类。

立即收起

如果你想让一个 block 元素根本不做文本换行，你可以使用white-space :

h1 { white-space: nowrap; }

上面的示例将使所有 1 级标题打印在一行上，无论它们有多宽。

还有...

...与这个问题并没有真正的关系，但是您的 HTML 全部乱七八糟，让您更难解决。没有理由嵌套 <span>例如，按照您的方式标记和 <p>绝不能嵌套在 <h1> 中标签。为什么要使用 <strong>那里？一个额外的强标题？您会发现保持 HTML 整洁干净对编写 CSS 大有帮助。