Satır sonlarını kullanırken HTML öğeleri arasındaki boşlukları kaldırma

Yaklaşık 10 imgsaniyelik satır içeren bir sayfam var . HTML'nin okunabilirliği için, her imgetiket arasına bir satır sonu koymak istiyorum , ancak bunu yapmak, resimler arasında istemediğim bir boşluk oluşturuyor. Etiketlerin arasında değil ortasında kırılmaktan başka yapabileceğim bir şey var mı?

Düzenleme: Şimdiye kadar sahip olduğum şeyin bir ekran görüntüsü. Kitap sırtı resimlerinin PHP kullanarak rastgele kombinasyonlarda görüntülenmesini istiyorum. Bu yüzden ayrı imgetiketlere ihtiyacım var .

CSS kullanabilirsin. Görüntülerin üzerinde gösterimi ayarlama: blok veya float: solda kendi aralığınızı tanımlamanıza ve HTML'yi istediğiniz gibi biçimlendirmenize izin verir, ancak mizanpajı uygun olabilecek veya olmayabilecek şekillerde etkiler.

Aksi takdirde, satır içi içerikle uğraşıyorsunuzdur, bu nedenle HTML biçimlendirmesi önemlidir - resimler etkili bir şekilde kelimeler gibi davranacaktır.

Bu eskiyse üzgünüm ama bir çözüm buldum.

font-size0'a ayarlamayı deneyin. Böylece, resimler arasındaki beyaz boşluklar genişlik olarak 0 olur ve resimler etkilenmez.

Bunun tüm tarayıcılarda çalışıp çalışmadığını bilmiyorum, ancak Chromium ve bazı <li>öğelerle denedim display: inline-block;.

Yorumları kullanabilirsiniz.

 <img src="..." alt="..."><!--
 --><img src="..." alt="..."><!--
 --><img src="..." alt="..."><!--
 --><img src="..." alt="...">

Yine de bir dizi görüntünün yan yana olmasının anlamsallığı konusunda endişelenirdim.

CSS ile yaklaşık şeyler yapmadan iki seçeneğiniz var. İlk seçenek, yalnızca boşluk içeren alt öğeleri etiketlerden kaldırmak için javascript kullanmaktır. Yine de daha güzel bir seçenek, etiketlerin içinde bir anlamı olmadan boşlukların var olabileceği gerçeğini kullanmaktır. Şöyle:

<div id="[divContainer_Id]"
    ><img src="[image1_url]" alt="img1"
    /><img src="[image2_url]" alt="img2"
    /><img src="[image3_url]" alt="img3"
    /><img src="[image4_url]" alt="img4"
    /><img src="[image5_url]" alt="img5"
    /><img src="[image6_url]" alt="img6"
/></div>

Flexbox bu eski sorunu kolayca çözebilir:

.image-wrapper {
  display: flex;
}

Flexbox hakkında daha fazla bilgi: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Çok fazla araştırma, deneme ve yanılmadan sonra, iyi çalışıyor gibi görünen ve yazı tipi boyutunu alt öğeler üzerinde manuel olarak yeniden ayarlamayı gerektirmeyen bir yol buldum, bu da tüm belgede standartlaştırılmış bir em yazı tipi boyutuna sahip olmama izin veriyor .

Firefox'ta bu oldukça basittir, sadece word-spacing: -1emana öğeye göre ayarlanır . Bazı nedenlerden dolayı, Chrome bunu görmezden geliyor (ve test ettiğim kadarıyla, değerden bağımsız olarak kelime aralığını yok sayıyor). Bunun yanında letter-spacing: -.31emebeveyne ve letter-spacing: normalçocuklara da ekliyorum . Bir em'in bu fraksiyonu, YALNIZCA em boyutunuz standartlaştırılmışsa alanın boyutudur . Buna karşılık Firefox, harf aralığı için negatif değerleri göz ardı eder, böylece kelime aralığına eklemez.

Bunu Firefox 13 (android üzerinde win / ubuntu, 14), Google Chrome 20 (win / ubuntu), Android Tarayıcısı ICS 4.0.4 ve IE 9'da test ettim. Ve bunun Safari'de de çalışabileceğini söylemeye can atıyorum. ama gerçekten bilmiyorum ...

İşte bir demo http://jsbin.com/acucam

Çok geç kaldım (sadece bir soru sordum ve ilgili bölümde zayıf buldum) ama sanırım display: table-cell; daha iyi bir çözüm

<style>
img {display:table-cell;}
</style>

<img src="img1.gif">
<img src="img2.gif">
<img src="img3.gif">

tek sorun, IE 7 ve Önceki sürümlerde çalışmayacak, ancak bu bir hack ile düzeltilebilir

Bu sorunu çözmek için aşağıdaki kod gibi CSS stil sayfası kullanın.

[divContainer_Id] img
{
    display:block;
    float:left;
    border:0;
}

alt metin http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7pgle3tdRJdPLy/Capture

Firefox 3.5 Final'de test ediliyor!

PS. html'niz bunu beğenmelidir.

<div id="[divContainer_Id]">
    <img src="[image1_url]" alt="img1" />
    <img src="[image2_url]" alt="img2" />
    <img src="[image3_url]" alt="img3" />
    <img src="[image4_url]" alt="img4" />
    <img src="[image5_url]" alt="img5" />
    <img src="[image6_url]" alt="img6" />
</div>

Etiketlerin arasında değil ortasında kırılmaktan başka yapabileceğim bir şey var mı?

Pek sayılmaz. Yana <img>gereksiz boşluklar (ve satır sonu) kesilmiş olacak ama tek alanlar - s içi unsurları, bu elemanların arasındaki boşluklar doğru metin boşluklar olarak HTML oluşturucu tarafından kabul edilmektedir olacak bir metin elemanının karakter verileri içine sokulabilir.

<img>Etiketlerin konumlandırılması kesinlikle bunu önleyebilir, ancak buna karşı bir tavsiyede bulunuyorum çünkü bu, her bir görüntünün manuel olarak bazı piksel ölçülerine göre konumlandırılması anlamına gelir ki bu çok iş olabilir.

Başka bir çözüm, boşlukların bulunduğu yerlerde alışılmadık satır kesmeleri kullanmak olabilir. Bu, ilk çift cevaplarına benzer ve unsurları sıraya koymanın alternatif bir yoludur. Ayrıca, işaretlemenizdeki boşlukları satır başı dönüşleriyle değiştirdiği için bir süper kenar optimizasyon tekniğidir.

<img
src="image1.jpg"><img
src="image2.jpg"><img
src="image3.jpg"><img
src="image4.jpg">

Bu kodun hiçbirinde boşluk olmadığını unutmayın. Normalde HTML'de boşlukların kullanıldığı yerler, satır başlarıyla değiştirilir. Paul de Vrieze'nin önerdiği gibi yorumları kullanmaktan ve beyaz boşlukları kullanmaktan daha az ayrıntılıdır.

Bu yaklaşım için tech.co'ya kredi verin.

beyaz boşluk: başlangıç; Benim için çalışıyor.

Öğeler arasındaki boşluk, yalnızca görsel biçimlendirme amacıyla HTML düzenleyicisi tarafından buraya yerleştirilir. Beyaz boşluğu kaldırmak için jQuery'yi kullanabilirsiniz:

$("div#MyImages").each(function () {

    var div = $(this);
    var children= div.children();
    children.detach();
    div.empty();
    div.append(children);

});

Bu, alt öğeleri ayırır, alt öğeleri tekrar eklemeden önce kalan boşlukları temizler.

Bu sorunun diğer yanıtlarından farklı olarak, bu yöntemi kullanmak, miras alınan css displayve font-sizedeğerlerin korunmasını sağlar. Ayrıca kullanmaya gerek yoktur floatve cleardaha sonra gerekli olan hantaldır . Elbette jQuery kullanmanız gerekecek.

Kişisel olarak, bunu yapmanın kesin bir yolu olmadığını belirten kabul edilmiş cevabı beğendim, herhangi bir şekilde bir numara kullanmadan değil.

Bana göre, bazen can sıkıcı bir sorun, örneğin bir dizi onay kutusunun neden doğru şekilde hizalanmadığını merak ederek bir saatinizi boşa harcamanıza neden olabilir .. Bu nedenle hızlı bir google'a sahip olmalıydım ve kendim bir css kuralı olup olmadığını kontrol etmeliydim hatırlamadığım ... ama hayır gibi görünüyor :(

Yazı tipi boyutunu kullanmanın bir sonraki en iyi cevabına gelince ... bana göre bu, metninizin neden görünmediğini merak ettiğinizde sizi ısıracak kötü bir hack.

Genellikle PHP ile çok şey geliştiriyorum ve bir onay kutuları ızgarası oluşturduğum durumda, PHP tarafından oluşturulan içerik herhangi bir boşluk / boşluk eklemediği için bu sorunu ortadan kaldırıyor.

Basitçe, ya tek bir satırda bulunan görüntülerle uğraşmak zorunda kalmayı ya da içeriği / görüntüleri oluşturmak için bir sunucu tarafı komut dosyasını kullanmayı öneririm.

Öğeler arasında bir CR / LF'yi kaldırmak için kullanmak yerine, SGML işleme talimatını kullanıyorum çünkü küçülticiler genellikle yorumları kaldırır, ancak XML PI'yi kaldırmaz. PHP PI, PHP tarafından işlendiğinde, aradaki CR / LF ile birlikte PI'yi tamamen kaldırma ve böylece en az 8 bayt tasarruf etme gibi ek bir avantaja sahiptir. X (HT) ML gibi herhangi bir keyfi geçerli talimat adını kullanabilir ve iki bayt kaydedebilirsiniz.

Quentin'in cevabından esinlenerek , kapanışı> sonraki etiketin başlangıcının yanına da yerleştirebilirsiniz.

 <img src="..." alt="..."
 /><img src="..." alt="..."
 /><img src="..." alt="..."
 /><img src="..." alt="..."/>

Anlamsal olarak konuşursak, sıralı veya sırasız bir liste kullanmak ve ardından CSS kullanarak uygun şekilde biçimlendirmek en iyisi olmaz mıydı?

<ul id="[UL_ID]">
    <li><img src="[image1_url]" alt="img1" /></li>
    <li><img src="[image2_url]" alt="img2" /></li>
    <li><img src="[image3_url]" alt="img3" /></li>
    <li><img src="[image4_url]" alt="img4" /></li>
    <li><img src="[image5_url]" alt="img5" /></li>
    <li><img src="[image6_url]" alt="img6" /></li>
</ul>

CSS kullanarak, bunu istediğiniz şekilde biçimlendirebilir ve kitaplar arasındaki boşlukları kaldırabilirsiniz.