css - 在列中定位 div？

Question

我有 2 个并排的 div，它们的宽度加在一起等于 500 像素。我应该怎么做呢？我在想也许可以使用 <span>为此。我不知道从哪里开始。谢谢

<span style="float: right; width:250px; margin-right: 550px;">
  <h3>NEWSLETTER</h3>
  <hr width="100" id="style" />
  <br />
  <form name="ccoptin" target="_blank" method="post">
    <font size="+1" face="LeagueGothic">Email:</font>
    <input name="emailBox" type="text" class="textField" placeholder="Not Available Yet" size="25" />
    <input type="button" class="submitBtn" value="Submit" disabled />
    <br />
    <center>
      <em>Occasional Discounts!</em>
    </center>
  </form>
</span>

<span style="float: left; width: 350px; margin-left: 550px;">
  <h3>OTHER INFO</h3>
  <hr width="100" id="style" />
  <br />

Answer 1

您可以使用 span block 来执行此操作。我会推荐 divs.. 但是如果你必须使用跨度。添加到样式 display:block;

这是一个演示:http://jsfiddle.net/tL7Sp/

<div style="width:500px;">
<span style="float: left; width:49%;display:block;"> 
<h3>NEWSLETTER</h3>
      <hr width="100" id="style" />
      <br />
      <form name="ccoptin" target="_blank" method="post">
        <font size="+1" face="LeagueGothic">Email:</font>
        <input name="emailBox" type="text" class="textField" placeholder="Not Available Yet" size="25" />
        <input type="button" class="submitBtn" value="Submit" disabled />
        <br />
        <center>
          <em>Occasional Discounts!</em>
        </center>
      </form>
    </span>

<span style="float: right; width: 49%; display:block;">
  <h3>OTHER INFO</h3>
  <hr width="100" id="style" />
  <br />
 </div>

基本上，要并排添加一个宽度为 500 像素的 div，您需要执行如下操作:

HTML

<div class="maindiv">
   <div class="divone"></div>
   <div class="divtwo"></div>
</div>

CSS

.maindiv {
   width:500px;
}
.divone, .divtwo {
   width:49%; 
   float:left;
}