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; }

将使您的整个页面总是1200px宽。将html替换为您想要的任何元素，ID或类。

NOWRAP

如果您希望块元素根本不进行文本换行，则可以使用white-space：

h1 { white-space: nowrap; }

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

另外...

...与这个问题没有关系，但你的HTML搞砸了，让你更难。例如，没有理由按照您的方式嵌套<span>标记，并且<p>永远不应嵌套在<h1>标记内。为什么在那里使用<strong>？一个特别强大的标题？您会发现在编写CSS时保持HTML整洁干净会有很大帮助。

Answer 2

在您不希望文本换行的元素上使用white-space: nowrap;。

CSS：如何将文本固定为窗口大小？

2 个答案:

静态宽度

NOWRAP

另外...