Soru Satır sarıcı elemanı olmadan yeni CSS tablosu hücresi başlatabilir miyim?


Bu gibi işaretleme verildi:

<div class="a">A</div>
<div class="b">B</div>
<div class="a">A</div>
<div class="b">B</div>
<div class="a">A</div>
<div class="b">B</div>

Bu belgeye benzer şekilde stil vermek mümkün mü?

|-------|---------|
|       |         |
|   A   |    B    |
|       |         |
|-------|---------|
|       |         |
|   A   |    B    |
|       |         |
|-------|---------|
|       |         |
|   A   |    B    |
|       |         |
|-------|---------|

(ve A veya B'deki içerik daha uzunsa, komşusu yüksekliğine uyacak şekilde büyür)…

herhangi bir ek işaretleme olmadan?

Bunu anladım .a ve .b bir display değeri table-cell Bu sadece büyük bir satır yapardı.

Çözüm nedir?


21
2018-06-04 22:09


Menşei


Jsfiddle alabilir miyiz? - SomeKittens
Emin. İşaretleme + durum css: jsfiddle.net/alanhogan/9VLgN - Alan H.
Bahisim çözüm yok - Mikael
ek işaretleme olmadan çalışmayacak, öğeleri istediğiniz gibi süzmek için bir sarıcıya veya ikiye ihtiyacınız olacak - Keith
@Alan, yazarken çiftleriVeri, mantıksal olarak çiftler halinde yapılandırılmış gibi görünüyor, bu nedenle fazladan işaretleme yeterli olacaktır. Verileri çiftler halinde gruplandıran işaretlemeyi kullanarak, çiftleri satır içi bloğu haline getirebilir ve tarayıcıların CSS'deki tablo özelliklerini kullanmadan durumu halledebilmesini sağlayabilirsiniz. - Jukka K. Korpela


Cevaplar:


Flexbox olmadan değilhenüz bazı büyük tarayıcılarda bulunmamış olan konsensüs gibi görünüyor.


4
2018-06-14 22:29





Hayır, sanırım "ek bir işaret olmadan" mümkün değil. İhtiyacı var:

  • div sarıcı display: table-row; A anb B "hücreleri" içeren
  • Dinleyiciler ile JavaScript divs, belirleyecek max Her bir çiftin Ab B yüksekliğinin yüksekliği ve daha küçük olana ayarlanması

İkincisi için çözüm:

CSS:

.a, .b {
    padding: 0.5em;
    float: left;
}
.a:nth-child(n+1) {
    clear: both;
}

jQuery:

$(function() {
    var max_width_a = 0, max_width_b = 0;
    $("div.a").each(function() {
        var elem_a = $(this),
            elem_b = elem_a.next("div.b"),
            height_a = elem_a.height(),
            height_b = elem_b.height(),
            pair = [elem_a, elem_b];

        max_width_a = Math.max(max_width_a, elem_a.width());    
        max_width_b = Math.max(max_width_b, elem_b.width());  
        $(pair).height(Math.max(height_a, height_b));
    }).width(max_width_a);
    $("div.b").width(max_width_b);
});

Fiddle'ını güncelledim. Belge hazır olarak çalışır, dinamik yükseklik değişikliklerini belirlemek istiyorsanız bunu özelleştirmeniz gerekir.

Nasıl çalıştığını açıklamam gerekirse bana bildirin. Tabii ki zorlayabilirsin div.a ve div.bCSS'deki genişliği ve jQuery ile maksimum genişliği kontrol etmeyin (o zaman her bir çiftte sadece maksimum yüksekliği belirlemelisiniz).


3
2018-06-04 22:15



Teşekkür ederim. Bununla birlikte jQuery'yi veya bunun için herhangi bir JS kullanmamayı tercih ederim. JS gerektirmesi gereken bir şey değil. Tarayıcıların bir şeyleri ne zaman yeniden yazacağını bildiği ve JS'nin işleri yeniden hesaplamak gerektiğinde bilmediği için CSS buna daha uygundur. (E.g .: Bu divlardan birinin içeriği değişir. Şimdi bu fonksiyonun aranması gerekiyor.) - Alan H.
Tabii ki haklısınız, saf CSS ile yapılabilir olmalı, ama olmadığında, bunun için senaryo yazdım. CSS çözümlerini test ediyorum, ancak istediğiniz şeyi elde edemedim. - Wirone


Hayır, bu her satır bir sarıcı vermeden mümkün değildir.

burada tek bir içeren sarmalayıcı (sıra başına) ile saf bir css çözümü

.row { 
    background-color: #ccc;
    float: left;
    margin: 10px 0;
    padding: 1em;
    width: 50%;
    }
.a {
    float: left;
    width: 45%;
    }
.b {
    float: right;
    width: 45%;
    }

ve html

<div class="row">
    <div class="a">Mofo break yo neck, yaonna chung fizzle, bizzle dizzle dang dolor boom shackalack augue. Fizzle izzle away sit its fo riz</div>
    <div class="b">Lorizzle hizzle dolizzle sit amet, brizzle adipiscing elizzle. Nullam i saw beyonces tizzles and my pizzle went crizzle shizzlin dizzle, fo shizzle mah nizzle fo rizzle, mah home g-dizzle sizzle, suscipit quizzle, i saw beyonces tizzles and my pizzle went crizzle vizzle, arcu. Break yo neck, yall shiznit tortor. Sed eros. Ma nizzle izzle you son of a bizzle dapibizzle turpishizzle. Integizzle check out this velit sed fo.</div>
</div>
<div class="row">
    <div class="a">Sizzle ullamcorpizzle. Shut the shizzle up sagittizzle dizzle a shiznit. Vestibulizzle you son of a bizzle ipsizzle primis izzle faucibus orci pot et ultrices posuere dope Fo shizzle; Crazy vestibulizzle. Fo shizzle my nizzle habitant morbi tristique senectus ma nizzle netizzle izzle tellivizzle famizzle turpis hizzle. Donizzle tempor hendrerit hizzle. Aliquizzle erat volutpat. </div>
    <div class="b">Vivamizzle sagittis.rttitizzle izzle, boom shackalack hizzle, orci. Integizzle hizzle funky fresh lectus. </div>
</div>
<div class="row">
    <div class="a">Donizzle tempor hendrerit hizzle. Aliquizzle erat volutpat. Things crunk fizzle, scelerisque bizzle, daahng dawg the bizzle, crackalackin shiznit, arcu. Daahng dawg elizzle. Crazy fermentizzle, est izzlot purizzle , bibendizzle sizzle amizzle, fo shizzle vehicula, fo shizzle my nizzle malesuada, shizznit. Aenizzle fizzle ipsizzle izzle est ullamcorpizzle tincidunt. Cool quizzle. Mauris ligula urna, tempizzle shut th</div>
    <div class="b">Mofo break yo neck, yall fo shizzle izzle leo bibendum crackalackin. Vivamizzle shit tortor vizzle away. Brizzle malesuada fo magna. Dang commodo, nisl nizzle go to hizzle egestizzle, magna dolor w</div>
</div>

a ve b'nin farklı arka plan renklerine sahip olmasını istiyorsanız, yüksekliği kullanmanız gerekir:% 100


1
2018-06-04 23:36



İle float: left; her bir çift için aynı boyda olmayacaksınız .a ve .b Bu elemanlar içeriğe göre her bir yüksekliğe sahip olacağından. height:100% muhtemelen onu düzeltir, ama Alan ister .as aynı genişlikte olması tableonun ascii yapıtlı örneğini görün;) O zaman zorlamalı width: ...; ama düzeltilmesini istediğini söylemedi. Ayrıca, yüzer divs sarıcı olmalı height: auto; overflow: auto;. Sarıcı olmalı display: table-row; ve çocuk divs olmalı display: table-cell; ve bu işe yaramalı, ama ek işaretleme istemiyor ... - Wirone
Kodu alıp bir html dokümanı içine koyarsanız, bunun bir tablo yanılsaması verdiğini göreceksiniz. ayrıca, soru herhangi bir ek işaretleme olmadan mümkün olup olmadığını ve cevap hayır oldu. dedi ki, bu mümkün olduğunca az ekstra işaretleme ile bunu yapmanın yolu. - kristina childs
elbette şamandıralar yükseklik dikte etmiyor. Bu yüzden .a ve .b'yi bir sarıcıya koymanız gerekiyor. Bunu yaparak, her bir hücredeki en büyük içerik, tüm sarıcıyı aşağı doğru iter ve ızgaradaki bir sonraki satırı doğru şekilde hizalar. Bu, her satırın arka plan renginin aynı olması durumunda mükemmel bir şekilde çalışır (neden bir #ccc var ki kolayca görülebilir), ancak .a ve .b'nin arka plan renkleri farklıysa,% 100 yükseklik gerekir. Bir veya daha fazla sınıfa eklendi. ekrana ihtiyacınız yok: bunu yapmak için tablo satırı veya tablo hücresi - kristina childs
display: blok, stilinizi nasıl şekillendireceğinize bağlı olarak kötü bir fikir olmaz. Dediğim gibi, bu mümkün olan en küçük işaretlemeyle yapmanın en iyi yoludur. - kristina childs
Tüm yorumumu anlamadın, sanırım. Çözümünüzde her biri .a ve her biri .b olmalı width: ...px; çünkü sadece o zaman masaya benzeyecek. Ve burada sabit genişliğe ihtiyaç olup olmadığını bilmiyorsunuz. Değilse display: table-cell; Çözüm, çünkü elemanlar birbirlerine otomatik olarak uyum sağlayacaktır. float: right; için .b gereksizdir, olabilir float: left; sevmek .a. Sarıcının her çocuğu yüzüyorsa, sarıcının hesaplanan yüksekliği 0 pikseldir, yazdım. height: auto; overflow: auto; için. Nevermind - Alan için çözüm değil. - Wirone


Bunu bir yoruma koyuyorum, ama muhtemelen sadece bir cevap vermelidir. İşte aynı şeyi (satırları kullanarak)% 100 yükseklik de

.row {
    background-color: #ccc;
    float: left;
    margin: 10px 0;
    padding: 1em;
    width: 50%;
}

#container_a {
    background-color: blue;
    float: left;
    position: relative;
    right: 50%;
    width: 100%;
}
#container_b {
    background-color: red;
    float: left;
    overflow: hidden;
    position: relative;
    right: 0;
    width: 100%;
}
#column_a {
    float: left;
    left: 50%;
    overflow: hidden;
    position: relative;
    width: 46%;
}
#column_b {
    float: left;
    left: 56%;
    overflow: hidden;
    position: relative;
    width: 46%;
}

ve html

<div class="row">
    <div id="container_b">
        <div id="container_a">
            <div id="column_a">Lorizzle hizzle dolizzle sit amet, brizzle adipiscing elizzle. Nullam i saw beyonces tizzles and my pizzle went crizzle shizzlin dizzle, fo shizzle mah nizzle fo rizzle, mah home g-dizzle sizzle, suscipit quizzle, i saw beyonces tizzles and my pizzle went crizzle vizzle, arcu. Break yo neck, yall shiznit tortor. Sed eros. Ma nizzle izzle you son of a bizzle dapibizzle turpishizzle. Integizzle check out this velit sed fo.</div>
            <div id="column_b">Vivamizzle sagittis.rttitizzle izzle, boom shackalack hizzle, orci. Integizzle hizzle funky fresh lectus. </div>
        </div>
    </div>
</div>
<div class="row">
    <div id="container_b">
        <div id="container_a">
            <div id="column_a">Lorizzle hizzle dolizzle sit amet, brizzle adipiscing elizzle. Nullam i saw beyonces tizzles and my pizzle went crizzle shizzlin dizzle, fo shizzle mah nizzle fo rizzle, mah home g-dizzle sizzle, suscipit quizzle, i saw beyonces tizzles and my pizzle went crizzle vizzle, arcu. Break yo neck, yall shiznit tortor. Sed eros. Ma nizzle izzle you son of a bizzle dapibizzle turpishizzle. Integizzle check out this velit sed fo.</div>
            <div id="column_b">Vivamizzle sagittis.rttitizzle izzle, boom shackalack hizzle, orci. Integizzle hizzle funky fresh lectus. </div>
        </div>
    </div>
</div>
<div class="row">
    <div id="container_b">
        <div id="container_a">
            <div id="column_a">Lorizzle hizzle dolizzle sit amet, brizzle adipiscing elizzle. Nullam i saw beyonces tizzles and my pizzle went crizzle shizzlin dizzle, fo shizzle mah nizzle fo rizzle, mah home g-dizzle sizzle, suscipit quizzle, i saw beyonces tizzles and my pizzle went crizzle vizzle, arcu. Break yo neck, yall shiznit tortor. Sed eros. Ma nizzle izzle you son of a bizzle dapibizzle turpishizzle. Integizzle check out this velit sed fo.</div>
            <div id="column_b">Vivamizzle sagittis.rttitizzle izzle, boom shackalack hizzle, orci. Integizzle hizzle funky fresh lectus. </div>
        </div>
    </div>
</div>

1
2018-06-05 22:18



JSFiddle burada. Tamam, size bir çeşit satır sarıcı gerektiğini düşünüyorum. üç Her satır için sarmalayıcılar? - Alan H.
Her bir div içermesinin herhangi bir komut dosyası OLMADAN eşit yükseklik olmasını istiyorsanız, evet. Geçmişte, arka plan renklerinin ve kenarlıklarının yanılsamasını veren bölümlü bir arka plan görüntüsü (800x1 piksellik bir şerit) yaparak geçmişte yaşadım. Eğer tüm pencerenin% 100 yüksekliğindeki bir div istiyorsanız, tüm vücudun içinde% 100 yükseklik ve ayrıca içinde div varsa olduğundan emin olmanız gerekir. Ancak bu, ROWS of divs için işe yaramaz, yalnızca tüm tarayıcı penceresinin% 100 yüksekliğindeki sütunlar - kristina childs
bunun gibi: kristinachilds.com/example/testes2.html  Tabii ki, bu sıvı düzenleri için işe yaramaz ve genel olarak bir şeyler yapmanın oldukça eski bir yoludur - kristina childs
Orijinal sorum CSS'den bahsediyor display: table-* özellikleri. Şüphesiz bunları kullanmak, sadece bir satırda sadece bir sarıcıya ihtiyacınız olduğu anlamına gelir. (Elbette, IE7 uyumluluğunu bir çeşit shim / polyfill olmadan kaybedersiniz.) - Alan H.
evet, işte bu nokta. masa hücresi kurşun geçirmez değildir. IE6 veya 7'yi desteklemeniz gerekmiyorsa, tablo hücresi gitmek için daha kolay yoldur (elbette tek sarıcıyla) - kristina childs


Bunu başaran bir jQuery eklentisi yazdım. Bir dönüştürür float bir içine düzeni display:table düzeni ve sizin için satırları işler. Hücre genişlikleri otomatik olarak işlenir olmadan komut dosyası (çok daha hızlı). Çok duyarlı. Bu WRECKER denir! Hahahaha !.

svachon.com/blog/wrecker-responsive-equal-height-columns-and-rows/


1
2018-02-04 13:45



Güzel belge sayfası. Nasıl yapılacağını sevdiğim bölümü; sahip olduğum sorulara cevap veriyor. - Alan H.
Bunu beğendim ve kullandım. Eklentinize bazı işlevler ekledim: Kullanıcılar excludeLastSingleItem (varsayılan yanlış) tuhaf sayıda öğe varsa son öğeyi wrecker tablosundan hariç tutmak için. Bu, son öğenin tablonun son satırında görünmesine, ancak birden çok sütunun (CSS kullanılarak) yayılmasına izin verir. Görmek github.com/stevenvachon/jquery.wrecker/pull/3 veya github.com/avjaarsveld/jquery.wrecker Son öğenin son sıraya benzeyen bir şeyde ortalandığı 2 sütun tablosuyla kullandım. - avjaarsveld


Bunu flexbox olmadan yapabilirsiniz, ancak nth-child () kullanmanız gerekecektir. Bu cevaba bir bakın: https://stackoverflow.com/a/12589629/740836


1
2018-02-26 08:41



temiz tablo hücrelerini etkilemez, sadece yüzer - allicarn


Bir satır sarıcı olmadan bir yol düşünemiyorum, ama eğer dış divun tam genişliğini asla değiştiremeyeceğinizi biliyorsanız, bunu başarmak mümkündür. Bunun için geçici çözümüm, aynı satırdaki a ve b öğelerine sığdırmak için sarmalayıcı boyutuna dayanıyor ve ardından bir sonraki a ve b otomatik olarak bir sonraki satıra kaydırılacak şekilde itilecek. Bununla birlikte, sargının genişliği küçülürse, a ve b aynı satırda devam etmez.

<div id="wrapper">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="a">A</div>
  <div class="b">B</div>
</div>

<style>
#wrapper { width: 500px;}
.a { background-color:green; float:left; width:50%;}
 .b {background-color:red;float:left;width:50%;}
</style>

http://jsfiddle.net/Lf0arzkn/1/


0
2017-11-26 19:54