Html 几个div'；s将每个分组在一行上_Html_Line

Html 几个div'；s将每个分组在一行上

html

Html 几个div'；s将每个分组在一行上,html,line,Html,Line,我看了一些例子，发现了如何把三个div放在同一行上当我想让下一组div在第二条线上时，我遇到了麻烦我该怎么做这是我的密码。如果我现在有s，我想要一条新线路 <!DOCTYPE html> <html> <head> <style type="text/css"> #id1 { font-family: Arial, Helvetica, sans-serif; background-color: #33ccff;

我看了一些例子，发现了如何把三个div放在同一行上

当我想让下一组div在第二条线上时，我遇到了麻烦

我该怎么做

这是我的密码。如果我现在有
s，我想要一条新线路

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
#id1 {  
  font-family: Arial, Helvetica, sans-serif;  
  background-color: #33ccff;  
  width: 1000px;  
        height: 500px;
  padding-top: 5px;  
  padding-right: 5px;  
  padding-bottom: 5px;  
  padding-left: 5px;  
  border-top-width: 5px;  
  border-right-width: 5px;  
  border-bottom-width: 5px;  
  border-left-width: 5px;  
  border-top-style: ridge;  
  border-right-style: ridge;  
  border-bottom-style: ridge;  
  border-left-style: ridge;  
  border-top-color: #330033;  
  border-right-color: #330033;  
  border-bottom-color: #330033;  
  border-left-color: #330033;
}

#id2 {  
  font-size: large;  
  font-family: Papyrus;
}

#id9 {  
  font-family: "Arial Narrow";
  min-width: 875px;
}

#id10 {  
  font-family: "Arial Narrow";
  float:left;
}

#id11 {  
  min-width: 875px;
}

</style> </head>
  <body>
    <div id="id1"> <br>
      <br>
      <div id="id9">
        <div id="id10" style="width:180px;"> <b>Last name: </b> ....</div>
        <div id="id10" style="width:200px;"> <b>First name :</b> .... </div>
        <div id="id10" style="width:200px;"> <b>Middle name :</b> .... </div>
        <div id="id10" style="width:200px;"> <b>Referral #: </b>....</div>
      </div><br>
      <div id="id11">
        <div id="id10" style="width:100px;"> <b> SSN: .... </b></div>
        <b>
          <div id="id10" style="width:150px;"> <b>Date of Birth: </b>.... </div>
          <div id="id10" style="width:50px;"> <b>Age </b>..... </div>
          <div id="id10" style="width:150px;"> <b>Gender: </b>.... </div>
          <div id="id10" style="width:100px;"> <b>Ethnicity: </b>.... </div>
        </b></div>
   <br>
        <div id="id9">
          <div id="id10" style="width:100px;"> <b>Address: </b>.... </div>
          <div id="id10" style="width:350px;"> .... </div>
          <div id="id10" style="width:150px;"> <b>City: </b>.... </div>
          <div id="id10" style="width:200px;"> <b>Zip: </b> .... <b> - </b>
            .... </div>
          <div id="id10" style="width:50px;"> <b>State: </b> .... </div>
          <div id="id10" style="width:350px;"> <b>Phone #: (</b> </div>
        </div>
      </div>
  </body>
</html>


#id1{
字体系列：Arial、Helvetica、无衬线字体；
背景色：#33ccff；
宽度：1000px；
高度：500px；
垫面：5px；
右侧填充：5px；
垫底：5px；
左侧填充：5px；
边框顶部宽度：5px；
右边框宽度：5px；
边框底宽：5px；
左边框宽度：5px；
边顶样式：脊；
右边框样式：脊状；
边框底部样式：脊状；
边框左侧样式：脊状；
边框顶部颜色：#330033；
右边框颜色：#330033；
边框底色：#330033；
左边框颜色：#330033；
}
#id2{
字体大小：大号；
字体家族：纸莎草；
}
#id9{
字体系列：“Arial窄”；
最小宽度：875px；
}
#id10{
字体系列：“Arial窄”；
浮动：左；
}
#id11{
最小宽度：875px；
}




姓氏：。。。。
名字：。。。。
中间名：。。。。
转介：。。。。


SSN:。。。。
出生日期:
年龄。。。。。
性别：。。。。
种族：。。。。


地址：。。。。
.... 
城市：。。。。
邮政编码：
.... 
国家：。。。。
电话#:（

我将在要以行显示的div元素上使用CSS display:inline


#id10{
显示：内联；
}
div{
边框：实心1px灰色；
}
姓氏：。。。。
名字：。。。。
中间名：。。。。
转介：。。。。


SSN:。。。。
出生日期:
年龄。。。。。
性别：。。。。
种族：。。。。


地址：。。。。
.... 
城市：。。。。
邮政编码：
.... 
国家：。。。。
电话#:（

在这些情况下，您可以使用table而不是div。将tables用于布局是丑陋的、非语义的，应该被粉碎！我尝试了tables，但当字段的数量和长度变化很大时，控制字段的位置变得太难了。在实际代码中，我在其中插入了PHP命令“…”是的。似乎我已经找到了一个答案：当id9得到“float:left”时，问题就消失了……谢谢。这看起来是一个优雅的解决方案。我刚刚尝试了你的。它确实在行上放置了字段，但它忽略了“width”参数。有没有办法解决这个问题？

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">

#id10 {
    display: inline;
}

div{
    border: solid 1px gray;
}

</style> </head>
  <body>
    <div id="id1"> 
      <div id="id9">
        <div id="id10" style="width:180px;"> <b>Last name: </b> ....</div>
        <div id="id10" style="width:200px;"> <b>First name :</b> .... </div>
        <div id="id10" style="width:200px;"> <b>Middle name :</b> .... </div>
        <div id="id10" style="width:200px;"> <b>Referral #: </b>....</div>
      </div>
    <br>
      <div id="id11">
        <div id="id10" style="width:100px;"> <b> SSN: .... </b></div>
        <b>
          <div id="id10" style="width:150px;"> <b>Date of Birth: </b>.... </div>
          <div id="id10" style="width:50px;"> <b>Age </b>..... </div>
          <div id="id10" style="width:150px;"> <b>Gender: </b>.... </div>
          <div id="id10" style="width:100px;"> <b>Ethnicity: </b>.... </div>
        </b>
        </div>
   <br>
        <div id="id9">
          <div id="id10" style="width:100px;"> <b>Address: </b>.... </div>
          <div id="id10" style="width:350px;"> .... </div>
          <div id="id10" style="width:150px;"> <b>City: </b>.... </div>
          <div id="id10" style="width:200px;"> <b>Zip: </b> .... <b> - </b>
            .... </div>
          <div id="id10" style="width:50px;"> <b>State: </b> .... </div>
          <div id="id10" style="width:350px;"> <b>Phone #: (</b> </div>
        </div>
      </div>
  </body>
</html>