Question

基本上我拥有的是一个带有“主要内容”块的HTML页面，如果你愿意的话。该页面的所有主要内容都在我所拥有的div中。我想要的是在它的右侧有一个包含更多内容的列，但无论我尝试做什么，总是最终要么在它下面或者在一些随机的地方。这是我的页面的代码，如果有人可以帮助指导我通过它将是非常棒的。

HTML：http://pastebin.com/Hh2TNGdj CSS：http://pastebin.com/ZCEJkFmH

感谢。

Answer 1

你可能很接近......在#pagecontent之后直接放入你的新div，并将其向右漂浮，然后将#pagecontent div漂浮，将允许它们并排坐下。

请注意，下一个内容（例如页脚）需要正确清除，以便它不会与浮动的div重叠。

Answer 2

我个人会转而使用HTML5标签。如果我要做这样的事情，我会沿着这条线（未经测试）使用代码：

    <div id="wrapper"> #wrap both sections in a container
        <section id="left">Left Section</section>
        <section id="right">Right Section</section>
    </div>

对于CSS，你可以这样做：

    #wrapper {
        width: 1000px;
        height: auto;
    }
    #left {
         width: 500px;
         height: auto;
         float: left;
     }
    #right {
          width: 500px;
          height: auto;
          float: left;
     }

要记住的一些重要事项。如果添加填充，则从宽度中减去填充（如果左右填充，则减去填充x2）。在你的页脚上，明确：两者。

希望这可以帮助你。

Answer 3

这是一个小提琴：http://jsfiddle.net/n6D7U/

new div #aside，
两列都以固定宽度浮动（此处为700 + 20 + 240像素），
最后一个CSS规则是因为父级只有浮动子级，因此流程中没有更多内容来推送背景......

Answer 4

我认为这应该有效：

<div style="padding:20px;">
        <div id="pagecontent">
                <span class="main-content-font">
                            The title of this page goes in the gray box above. This is the homepage, you can put <u>anything</u> here  (the main content of your website
                            which has some neat features and explains what your site is about should go here)!<br />
                            <br>
                            Content, content, and more content!<br />
                            <br>
                            Try to make it fill up as much space as possible, making the page longer. Don't fill it with useless junk, just anything
                            you can think of that will benefit the page.
               </span> 
               <span class="whatever">
                    some things
               </span>
        </div>
</div>

我还没有尝试过，但是使main-content-font跨度不会添加换行符，因此whatever范围将放在右侧。

如何将某些东西直接放在另一件事物的右边（HTML / CSS）？

4 个答案: