Question

我只是在玩创建一个网站，原谅凌乱的代码，这个游戏很新。

基本上我试图对网站进行分区，每个部分内容向左或向右交替。正如你所看到的那样，我设法做了左边的那个（第2节），但我似乎无法做到右边的那个（第3节）。导航栏也是固定的，但没有在JSFiddle上显示。我也想知道为什么我的文字在我的1920x1080显示器上显示正常，但在我的1366x768笔记本电脑上，它溢出了div，请记住每个部分的背景最终将是一个图像，所以我可以＆＃39;重复一遍。

我上传了JSFiddle，因为我对在此处上传代码所要做的事情感到困惑，希望这不是问题。

感谢您的帮助，并再次为令人难以置信的凌乱代码感到抱歉！

<section id="screen1">
    <div class="hLogo">Title</div>
    <nav>
        <ul>
            <li>
                <a href="#">1</a>
            </li>
            <li>
                <a href="#">2</a>
            </li>
            <li>
                <a href="#">3</a>
            </li>
            <li>
                <a href="#">4</a>
            </li>
            <li>
                <a href="#">5</a>
            </li>
            <li>
                <a href="#">6</a>
            </li>
        </ul>
        <img class="ad" src="css/asc.jpg" />
    </nav>
</section>
<section id="screen2">
    <div class="content left nobg">
        <div class="scrTitle">About</div>
        <p class="scrContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
    </div>
</section>
<section id="screen3">
    <div class="content right nobg">
        <div class="scrTitle">About</div>
        <p class="scrContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
    </div>
</section>

Answer 1

要解决第3节中没有向右移动的问题，您只需将这段代码添加到CSS中即可：

.scrContent2 {
    font-size: 75%;
    overflow: hidden;
    width: 20%;
    float: right;
 }

这意味着您的HTML需要更改第3部分，如下所示：

<p class="scrContent2">

这是一个jsfiddle .. http://jsfiddle.net/jw5du15v/5/

Answer 2

请尝试以下操作： DEMO

<强> CSS：

.right {
    margin-right: 10%;
    text-align:right;
    float:right;
}
.left {
    margin-left: 10%;
    float: left;
    text-align:left:
}

<强> HTML：

 <div class="content nobg">
            <div class="scrTitle left">About</div>
            <p class="scrContent right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
        </div>

Answer 3

使用CSS将您的网页浮动到左侧和右侧。

试试这个

.content left nobg {

    float:left;
}

.content right nobg {

    float:right;
 }

内容不会浮动页面右侧

3 个答案: