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

问题描述

所以我对编写代码非常陌生（大概几个星期），并且在为我的网站编写代码时遇到了困难。我想要一个像这样的布局

So i'm quite new to writing codes(about a few weeks) and i've hit a wall while writing codes for my website. I want to have a layout such as this

，但无法弄清楚如何并排放置两个盒子（一个盒子将是一个视频解释我的网站，另一个盒子将是一个注册注册表格。）
我希望他们彼此相邻，框之间大约一英寸分隔。

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

我还需要帮助我的网站的宽度？现在看起来页眉不适合页面，导致水平滚动。有点像这样

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

我希望它能让整个网站看起来像是一个大盒子，并且我想要盒子里的所有内容。有人可以帮帮我吗？非常感激。

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

推荐答案

这很简单：

< a href =http://jsfiddle.net/kkobold/qMQL5/ =noreferrer> http://jsfiddle.net/kkobold/qMQL5/

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

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

-

#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盒并排放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！