使用CSS在彼此上方顯示兩個div

Question

我正在嘗試創建我認為很簡單的東西，但是我搞砸了。

我想在彼此之上創建兩行。 在每一行中，將並排有五個迷你型材。

City 1


pic          pic       pic          pic      pic
name         name      name         name     name 
email        email     email        email    email 


City 2


pic         pic       pic            pic      pic
name        name      name           name     name
email       email     email          email    email

如您在http://jsfiddle.net/mjmitche/GRWZG/18/這樣的小提琴中看到的，我完全搞砸了。 我無法讓城市相互疊加。 而且我不能在每個配置文件周圍添加填充。 在我的小提琴中，每行應該只有兩個配置文件。

對新手有什么建議嗎？ 謝謝

Answer 1

您只需要應用一些類似的選擇器，我為您添加了一些類。 可以肯定id =“ New York”將無效，但這不會影響樣式： http : //jsfiddle.net/jalbertbowdenii/GRWZG/27/

Answer 2

問題出在您所在的城市div，例如div id="Vancouver" 。 將其樣式設置為float: left並賦予其寬度100％，例如#Vancouver {float: left; width: 100%;} #Vancouver {float: left; width: 100%;} 。

http://jsfiddle.net/GRWZG/52/

另外，我認為，帶有“ New York”之類的兩個單詞的id在HTML中是不合法的。 考慮將其更改為紐約。

Answer 3

刪除所有CSS，然后將其替換為div {float: left; } div {float: left; } 。 這將使您朝正確的方向開始。 您正在思考問題，並且變得太復雜了。

Answer 4

樣式

#Vancouver {float:left; display:block; }
.vancouver {float: left;}
#New_York {clear:both; float:left; display:block;  margin-top:20px; }
.newyork {float: left; }
.vancouver a {padding: 10px 10px 10px 10px;}

更新：

#Vancouver {float:left; display:block; }
.vancouver {float: left; padding-right:20px;}
#New_York {clear:both; float:left; display:block;  margin-top:20px; }
.newyork {float: left; padding-right:20px; }

數據

<div id="Vancouver">
 <div class="headVan">Vancouver</div>
 <div class="vancouver a">
  <ul>
   <li><img src="http://familylawact.ca/wp-content/uploads/2011/11/1.png" alt ="test" /></li>
   <li>Tom JErk</li>
   <li>firm: </li>
   <li>tel: </li>
   <li>profile </li>
  </ul>
 </div>

 <div class="vancouver b">
  <ul>
   <li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li>
   <li>Sam JErk</li>
   <li>firm: </li>
   <li>tel: </li>
   <li>profile </li>
  </ul>
 </div>
</div>

<div id="New_York">
 <div class"headvic">New York</div>
 <div class="newyork a">
  <ul>
   <li><img src="http://familylawact.ca/wp-content/uploads/2011/11/3.png" alt ="test" /></li>
   <li>Nat JErk</li>
   <li>firm: </li>
   <li>tel: </li>
   <li>profile </li>
  </ul>
 </div>
 <div class="newyork b">
  <ul>
   <li><img src="http://familylawact.ca/wp-content/uploads/2011/11/4.png" alt ="test" /></li>
   <li>Jed JErk</li>
   <li>firm: </li>
   <li>tel: </li>
   <li>profile </li>
  </ul>
 </div>
</div>

Answer 5

造成災難的主要原因是child DIV's中存在float ，但您clear it's parent DIV's是否有float 。 因此，首先像這樣clear his parent ：

.city{
    overflow:hidden;
} 

檢查此示例http://jsfiddle.net/GRWZG/58/

Answer 6

如果DIV的寬度設置為父DIV的100％，則下一個DIV將自動下降。 如果你做這樣的事情

#A {
float: left; 
width: 20px;


}

#B {
float: left; 
width: 20px;


}

#C {
float: left; 
width: 20px;


}

父DIV的寬度為60，它們全部位於同一行中。 如果創建DIV的D，E和F，並且它們的寬度也為20px，則將具有第二行，其中包含三個DIV。 它們彼此依序排列，但是如果三個的總寬度超過60px（父DIV寬度），則其中一個DIV將下降到下一行。