Question

我有2个div我想要并排，一起等于500px的宽度。我该怎么做呢？我想也许可以使用<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块来执行此操作。我会推荐div ..但如果你必须使用跨度。添加到样式display:block;

这是一个DEMO：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>

基本上要在宽度为500px的情况下并排添加div，你可以这样做：

<强> HTML

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

<强> CSS

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

Answer 2

HTML：

<div id="main-div">
    <div class="divone">
          <h3 style>NEWSLETTER</h3><hr/>          
          <form class="form">
          Email: 
          <input type="text" name="emailBox" class="textField" placeholder="Not Available Yet">
          <input type="submit" value="Submit" class="submit-btn">
          </form><br />

    </div>

    <div class="divtwo">
         <h3 style>OTHER INFO</h3><hr/>
    </div>
    <div style="clear:both"></div>
          <center>
          <em>Occasional Discounts!</em>
          </center>
</div>

CSS：

#main-div{
    width:500px;
    margin:0 auto;
}
.divone,.divtwo{
    width:250px;
    float:left;
}
h3{
    margin:0;
    padding:0;
}
hr{
    margin:0;
    padding:0;
    width: 54%;
}
.form{
padding-top: 10px;
}
.textField{

}
.submit-btn{
    float: left;
    margin-top:10px;
}

希望它会对你有所帮助。

Answer 3

您需要先删除每个跨度上的边距。同时尝试将它们更改为浮动方向相同。例如：

span {
    float: left;
    width: 250px;
}

span:nth-of-type(2) {
    float: left;
    width: 350px;
}

请参阅this codepen

将div放在列中？

3 个答案: