如何并排放置两个div盒

时间:2013-03-13 00:33:21

标签: html css

所以我很难编写代码(大约几周),而且在为我的网站编写代码时遇到了问题。我希望有一个这样的布局

Image 但无法弄清楚如何并排放置两个盒子(一个盒子将是一个视频解释我的网站,另一个盒子将是一个注册登记表格。) 我希望它们彼此相邻,盒子间隔一英寸。

我的网站宽度也需要帮助吗?现在它看起来像标题不适合页面,导致水平滚动。有点像这样

Image 我想要它,以便整个网站看起来像一个大盒子,我想要所有内容的内容。有人可以帮帮我吗?非常感激。提前谢谢。

9 个答案:

答案 0 :(得分:55)

这很简单:

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>

答案 1 :(得分:27)

这将起作用

<div style="width:800px;">
  <div style="width:300px; float:left;"></div>
  <div style="width:300px; float:right;"></div>
</div>

答案 2 :(得分:3)

我只是并排给出了两个响应式div的代码

*{
  margin: 0;
  padding: 0;
}

#parent {
  display: flex;
  justify-content: space-around;
}

#left {
  border: 1px solid lightgray;
  background-color: red;
  width: 40%;
}

#right {
  border: 1px solid lightgray;
  background-color: green;
  width: 40%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="parent">
        <div id="left">
        lorem ipsum dolor sit emet
        </div>
        <div id="right">
        lorem ipsum dolor sit emet
        </div>
    </div>
</body>
</html>

答案 3 :(得分:2)

深入了解CSS和HTML,你会想到这一点。它只是左右浮动框,这些框需要在同一个div内。 http://www.w3schools.com/html/html_layout.asp可能是一个很好的资源。

答案 4 :(得分:1)

关于网站的宽度,您需要考虑使用包装类来包围您的内容(这应该有助于限制元素宽度并防止它们扩展到内容之外):

<style>
.wrapper {
  width: 980px;
}
</style>

<body>
  <div class="wrapper">
    //everything else
  </div>
</body>

就内容框而言,我建议尝试使用

<style>
.boxes {
  display: inline-block;
  width: 360px;
  height: 360px;
}
#leftBox {
  float: left;
}
#rightBox {
  float: right;
}
</style>

我会花一些时间研究盒子对象模型和所有“显示”属性。他们将永远有所帮助。特别注意“内联块”,我几乎每天都在使用它。

答案 5 :(得分:1)

这只是您提供的线框的简单(无响应)HTML / CSS转换。

enter image description here

HTML

<div class="container">

  <header>
    <div class="logo">Logo</div>
    <div class="menu">Email/Password</div>
  </header>

  <div class="first-box">
    <p>Video Explaning Site</p>
  </div>

  <div class="second-box">
    <p>Sign up Info</p>
  </div>

  <footer>
    <div>Website Info</div>
  </footer>

</div>

CSS

.container {
  width:900px; 
  height: 150px;
}

header {
  width:900px; 
  float:left; 
  background: pink; 
  height: 50px;
}

.logo {
  float: left;
  padding: 15px
}

.menu {
  float: right;
  padding: 15px
}

.first-box {
  width:300px; 
  float:left; 
  background: green; 
  height: 150px;
  margin: 50px
}

.first-box p {
  color: #ffffff;
  padding-left: 80px;
  padding-top: 50px;
}

.second-box {
  width:300px; 
  height: 150px; 
  float:right; 
  background: blue;
  margin: 50px
}

.second-box p {
  color: #ffffff;
  padding-left: 110px;
  padding-top: 50px;
}

footer {
  width:900px; 
  float:left; 
  background: black; 
  height: 50px;
  color: #ffffff;
}

footer div {
  padding: 15px;
}

答案 6 :(得分:1)

v-on

答案 7 :(得分:0)

您可以通过三种方式做到这一点:

浮动方法

<div class="float-container">
  <div class="float-child">
    <div class="green">Float Column 1</div>
  </div>
  <div class="float-child">
    <div class="blue">Float Column 2</div>
  </div>
</div>

.float-container {
    border: 3px solid #fff;
    padding: 20px;
}

.float-child {
    width: 50%;
    float: left;
    padding: 20px;
    border: 2px solid red;
}

弹性盒方法

<div class="flex-container">
  <div class="flex-child magenta">
    Flex Column 1
  </div>
  <div class="flex-child green">
    Flex Column 2
  </div>
</div>
.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
    border: 2px solid yellow;
}  

.flex-child:first-child {
    margin-right: 20px;
} 

CSS 网格方法

<div class="grid-container">
    <div class="grid-child purple">
        Grid Column 1
    </div>
    <div class="grid-child green">
        Grid Column 2
    </div>
</div>
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

Source

答案 8 :(得分:-1)

根据您给出的布局,您可以在css中使用float left属性。

HTML

<div id="header"> LOGO</div>
<div id="wrap">
<div id="box1"></div>
<div id="box2"></div>
<div id="clear"></div>
</div>
<div id="footer">Footer</div>

CSS

body{
margin:0px;
height: 100%;
}
#header {

background-color: black;
height: 50px;
color: white;
font-size:25px;

 }

#wrap {

margin-left:200px;
margin-top:300px;


 }
#box1 {
width:200px;
float: left;
height: 300px;
background-color: black;
margin-right: 20px;
}
#box2{
width: 200px;
float: left;
height: 300px;
background-color: blue;
}
#clear {
clear: both;
}
#footer {
width: 100%;
background-color: black;
height: 50px;
margin-top:300px;
color: white;
font-size:25px;
position: absolute;
}