将div拆分为2列

Question

我试图将div拆分为2列。我试图在另一个问题中找到答案，但我仍然没有得到它。 我成功地将div拆分为2列，但现在div的内容彼此相距很远（我希望它们接近）。 这是我的HTML：

<div id="connect_us" class="container">
<h1>תאמו איתנו פגישה עוד היום</h1>
<div id="right">
<form action="connect">
    <input type="text" name="name" value="שם"><P>
    <input type="text" name="company" value="שם חברה" onclick="clear()"><P>
    <input type="text" name="phone" value="טלפון" onclick="clear()"><P>
    <input type="text" name="mail" value="דואר אלקטרוני" onclick="clear()"><P>
    <input type="text" name="message" value="הודעה" onclick="clear()"><P>
</form>
</div>

<div id="left">
<input type="text" name="company" value="kt zufr" onclick="clear()"><P>
</div>
</div>  

这是我的css：

#connect_us{
text-align: center;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color:gray;
overflow:auto; 
width: 100%; 

}
#left, #right { 
  width: 45%; 
  margin:5px; 
  padding: 1em; 

   } 

#left  { float:left;  }
#right { float:right; } 

我想要做的就是这样（因为你可以看到2个列很接近）：

Answer 1

Sol 1： 尝试为此{strong> Demo 指定#contact_us div的最大宽度：

#connect_us {
    text-align: center;
    font-family:"open_sans_hebrewregular", "alefregular", arial, "Times New Roman";
    color:gray;
    overflow:auto;
    width: 100%;
    max-width:900px;
    margin:0 auto;
}

或

Sol 2：当你使用全屏时，你可以将左右两边的div都浮动到左侧。所以你可以用它来避免2 div之间的空间：

#left, #right  {
    float:left;
    background-color:#ddd;
}

Answer 2

你想要实现的目标很简单。

<div class="left">
.....
</div>

<div class="right">
.....
</div>

.left, .right {
 float: left;
 width: 48%;
 margin : 1%;
 padding : 1%;
}

#connect_us {
 width: 100%;
 float: left;
}

这将有效，你的2 div将更加接近。如果您还使用边框，那么我必须建议您在div上使用 box-sizing：border-box 属性。

Answer 3

对两个列都尝试display:table-cell;，对主包装器尝试display:table。

Answer 4

我遇到了你的问题。问题是你没有指定输入字段的宽度...看，div最初没有可见的比例，我们没有放任何背景颜色或边框来定义它。所以可见的东西是我们的表单字段（INPUT BOX）。所以把它定义为......

#left input,
#right input{
    width:100%;
}