html - 将 div 拆分为 2 列

Question

我正在尝试将一个 div 分成两列。我试图在另一个问题中找到答案，但我仍然不明白。我成功地将 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

解决方案 1:尝试像这样为 #contact_us div 指定最大宽度 Demo :

#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 都 float 到左侧。因此您可以使用它来避免 2 个 div 之间的空间:

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