如何并排放置两个div [英] How to put two divs side by side

问题描述

因此，我刚开始编写代码(大约几个星期)，并且在为我的网站编写代码时遇到了麻烦.我想要这样的布局:

So I'm quite new to writing code (about a few weeks) and I've hit a wall while writing code for my website. I want to have a layout like this:

但是我不知道如何将两个盒子并排放置.一个方框是一个解释我的网站的视频，另一个方框是一个注册注册表. 我希望这些框彼此相邻，彼此之间相距约一英寸.

But I can't figure out how to put the two boxes side by side. One box will be a video explaining my website, while the other box will be a sign up registration form. I want the boxes to be next to each other, with about an inch of separation between them.

我也需要有关我的网站标题宽度的帮助.现在看来页眉不适合页面，导致水平滚动.有点像这样:

I also need help with the width of my website's header. Right now it looks like the header doesn't fit on the page, causing a horizontal scroll. Kind of like this:

我希望整个网站就像一个大盒子，所有内容都放在那个盒子里.有人可以帮帮我吗?非常感激.预先谢谢你.

I want it so that the entire website is like one big box, and all the content is inside that box. Can someone please help me? Much appreciated. Thank you in advance.

推荐答案

http://jsfiddle.net/kkobold/qMQL5/

#header {
    width: 100%;
    background-color: red;
    height: 30px;
}

#container {
    width: 300px;
    background-color: #ffcc33;
    margin: auto;
}
#first {
    width: 100px;
    float: left;
    height: 300px;
        background-color: blue;
}
#second {
    width: 200px;
    float: left;
    height: 300px;
    background-color: green;
}
#clear {
    clear: both;
}

<div id="header"></div>
<div id="container">
    <div id="first"></div>
    <div id="second"></div>
    <div id="clear"></div>
</div>

这篇关于如何并排放置两个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！