Question

我有一个列表，它使用float来显示div的另一面的键和值。

我遇到的问题是，当一个长字符串作为一个键被浮动时，而不是分成多行，整行向下移动到一个新行。

这显示正常，但如果在减肥手术后有多个值（例如，“减肥手术，手臂抬起”），则整条线下降到下一个，然后中断下面的浮子的流动。如下例所示：http://jsfiddle.net/3djakgf7/1/

我怎样才能使浮动在左键对面的线上开始，然后当它用完房间时下降到下一行，并将下面的列表项向下推一行？

<ul class="post-meta">
    <li>
        <span class="post-meta-key">Procedure</span>
        <span class="pull-right">Weight Loss Surgery, Arm Lift</span>
    </li>
    <li>
        <span class="post-meta-key">Age</span>
        <span class="pull-right">44</span>
    </li>
    <li>
        <span class="post-meta-key">Location</span>
        <span class="pull-right">Surrey</span>
    </li>
</ul>

Answer 1

请检查以下解决方案或更新后的fiddle

ul {
    width: 236px;
    padding-left: 0;
    margin-bottom: 0;
}
ul li {
    list-style-type: none;
    width: 100%;
    float: left;
}
.post-meta-key {
    font-weight: bold;
    float: left;
    width: 76px;
}
.pull-right {
    float: right;
    width: 160px;
}

Answer 2

以下是使用CSS表的替代方法。

如果第二列与块的右边缘对齐，它的工作原理相当不错。

ArrayList<Person> visited;
ArrayList<ArrayList<Person>> clusters;

void createGroups(){
   for(Person p : people){

      //if we've already added this Person, skip it
      if(!visited.contains(p)){
         //since we haven't seen this Person, it isn't clustered yet
         ArrayList<Person> newCluster = new ArrayList<Person>();
         clusters.add(newCluster);

         //start the recursion
         addMe(p, newCluster);
      }
   }
}

void addMe(Person p, ArrayList<Person> cluster){

   //if we've already added this Person, skip it
   if(visited.contains(p)){
      return;
   }

   //add me first
   cluster.add(p);
   //remember that we've already visited me
   visited.add(p);

   //now add my neighbors
   for(Person n : p.connections){
      addMe(n, cluster);
   }
}

ul {
  padding-left: 0;
  margin-bottom: 0;
  width: 238px;
  overflow: auto;
}
ul li {
  display: table-row;
}
ul li span {
    border: 1px dotted blue;
}
.post-meta-key {
  font-weight: bold;
  display: table-cell;
}
.pull-right {
  display: table-cell;
  text-align: right;
}

浮动跨度粘在一条线上，但想要流入新线

2 个答案: