css / php: bu nasıl div şamandıra sorunu çözmek için / tek dizide bile loop

7 Cevap php

Benim kod Bu yazının sonundadır.

Yeryüzünde ne aligh için "kutu 3" alabilirim sonraki yerine "kutusuna 2" nin sonunda kendini hizalama "kutu 1" VEYA "kutusunda 1" iç içerik için.

Bir dizi tarafından çağrılan kullanılan varlık olarak (stil 2) - Burada önemli olan şey, tüm dört kutu aynı stili kullanmak ZORUNLU olmasıdır.

İşte şimdi ne ve yapmaya çalışıyorum i # m ne ne olduğunu:

http://img524.imageshack.us/img524/1408/lastexample.gif

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {border:1px solid #000000; width:620px; position:relative;
}
.style2 {border:1px solid #000000; width:300px; float:left;}
-->
</style>
</head>

<body>
<div class="style1">

    <div class="style2">box 1<br>
      <br>
      <br>
    </div>
    <div class="style2">box 2<br>
      <br>
      <br>
      <br>
  </div>

    <div class="style2">box 3<br>
      <br>
    </div>
    <div class="style2">box 4<br>
      <br>
      <br>
    </div>
</div>
</body>
</html>

7 Cevap

Tüm iç DIV'leri için tek bir sınıfını kullanarak saf CSS ile bu almak için bir yol bilmiyorum. Sen Masonry gibi bir şey istiyorum.

CSS şamandıraların flip tarafında olarak masonluğun düşünün. Yüzen yatay dikey sonra elemanları düzenlemek gibi, Masonluk dikey sonra yatay düzenler nerede. Sonuç sadece bir duvarda bir mason uydurma taşlar gibi değişen yükseklikte elemanları arasındaki düşey boşluklar bırakır.

-The Masonry home page

Ben sadece bir stil ile bunu yapmak imkansız olduğunu düşünüyorum. Her garip kutusuna bıraktı ve şamandıra: Herhalde şamandıra geçerli olacak doğru her hatta kutusuna. Eğer dizinin üzerinde döngü ve herhangi bir özel kutusunda özel muamele, uygun bir sınıf uygulamak ve öyle değil.

Ben bu divs dinamik olarak oluşturulan ediliyor varsaymak gidiyorum.

Geçerli sorun o satırda divs yüksek daha mı düşük süzülüyor ürün elde edemez. Ben css kullanarak istediğinizi yapmak için bir yol hazırlıksız düşünemiyorum. Eğer bir dizi üzerinde döngü bu divs oluştururken Ancak, bu çözülebilir olduğunu.

Döngü sayısı çift ise muhtemelen yan divlere tarafından ve için döngü kontrolünde iki tarafını yaratacak. Yerine sol sağ sütun dinamik div append ise. Divs yüksekliği bir tarafında daha fazla olmak biter Bu, tuhaf bakacağız, ama bu muhtemelen div yükseklikleri takip ve kısa kolona yeni div atama yerine, çift ve tek alternatif ile sabit olabilir.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {border:1px solid #000000; width:620px; position:relative;
}
.style2 {border:1px solid #000000; width:49%; float:left;}
.style3 {border:1px solid #f00; width:49%;margin-top:-20px;float:left;}
-->
</style>
</head>

<body>
<div class="style1">

    <div class="style2">box 1<br>
      <br>
      <br>
    </div>
    <div class="style2">box 2<br>
      <br>
      <br>
      <br>
  </div>

    <div class="style3">box 3<br>
      <br>
    </div>
    <div class="style2">box 4<br>
      <br>
      <br>
    </div>
    <div style="clear:both"></div>
</div>
</body>
</html>

Bu deneyin

Başka biri. Muhtemelen, tek ve çift kutularını işaretleyebilirsiniz:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {border:1px solid #000000; width:620px; position:relative;}
.style2 {border:1px solid #000000; width:300px; }


.a {float:left;}
.b {float:right;}
-->
</style>
</head>

<body>
<div class="style1">
    <div class="style2 a">box 1<br>
      <br>
      <br>
    </div>
    <div class="style2 b">box 2<br>
      <br>
      <br>
      <br>
    </div>
    <div class="style2 a">box 3<br>
      <br>
    </div>
    <div class="style2 b">box 4<br>
      <br>
      <br>
    </div>
</div>
</body>
</html>

*FOLLOW ON TO CSS ISSUE, PHP CODE *

İşte benim kod: http://www.pcgage.net/code.zip (üzgünüm, kod gerçekten pisliği, hatta kod kabını kullanarak neden yapıştırarak).

Satırına gidin: 160 (-174) - Bu soru döngü. Ben sadece bir tek / çift, bu mükemmel çalışacak olabilir eğer. Şimdilik, hiç bu kimin, sadece yeni tek parça için div geçerli kodu kullanın, ben bu daha sonra farklı bir stil kullanmak için düzenleyebilirsiniz.

Yardım için teşekkürler, o kadar muhteşem oldu.

Sen tam olarak nasıl istersen divs düzenlemek için CSS veya HTML tablosu kullanabilirsiniz.

HTML örneği (her şey için aynı sınıfları kullanılır çünkü daha kısa bir sürümüne sınıf niteliği değişti):

<div class="style1 style2">
  <table>
    <tr>
      <td>box 1</br></br></br></td>
      <td>box 3</br></br></br></td>
    </tr>
    <tr>
      <td>box 2</br></br></br></td>
      <td>box 4</br></br></br></td>
    </tr>
  </table>
</div>

Ayrıca, her ikisi de açık ve yakın etiketi yok etiketleri için bir kapanış çizgi kullanmak daha stil; diğer bir deyişle, </br> kullanımı ve </hr> yerine <br> ve <hr> ve. Bu size kalmış ama ben bunu işaret düşündüm.

etiketler