Soru css genişliği% 100 ila 3 sütun


3 sütunun olduğu yerleşime sahibim. Orada% 100'ü 3'e bölüyorum.

Sonuç belli ki 33.333 ...

Benim gol mükemmel Ekranın 1 / 3'ü.

Soru:

Noktadan sonra kaç sayı CSS, genişliğin 1 / 3'ünü belirtmek için kullanılabilir?

Örneğin. 33.33333  (n=5) <- kaç tane n css tutabilir

HTML:

<div id="wrapper">
    <div id="c1"></div>
    <div id="c2"></div>
    <div id="c3"></div>
</div>

CSS:

#c1, #c2, #c3 {
    width: 33%; // 1/3 of 100%
}

3 ile bölmek için daha iyi bir yol biliyorsanız, ben sizin önerilerinize açığım :)


44
2017-09-13 08:30


Menşei


İhtiyacınız olan div'ler için% 33'ü kullanabilir ve her ikisi arasında, her biri% 0,5 genişliğinde iki ek div ekleyebilirsiniz. Böylelikle, div'ler eşit büyüklüktedir ve siz kayan nokta problemleriyle karşılaşmazsınız. - urzeit
Bu iş parçacığının sana yardım edeceğini düşünüyorum. stackoverflow.com/questions/4308989/... - franchez
Sadece iki kez% 33 ve üçüncü% 34'ü kullanın - kimse tanımayacak. Tabii ki, durumda, orijinal "kusursuzluk" planından sapmak istersiniz - Joshua
CSS'nin teorik hassaslığı alakasız: ekran sadece bütün piksellerde çizilebilir.
İşte CSS'de kayan nokta sayıları hakkında ilginç bir yayın. Tarayıcılar yorum yapmakta özgür görünüyorlar, gerçekten bir özellik / standart yok. - Mathijs Flietstra


Cevaplar:


CSS'de mükemmel bir 1/3 olduğunu düşünmüyorum. Ben şahsen yaparım

#c1, #c2 {
    width: 33%; // 1/3 of 100%
}

#c3 {
    width: auto;
    //or width:34%;
}

16
2017-09-13 08:35



Yukarıda yazdığım gibi, böyle bir çözümün sorunlara neden olabileceğinden endişeleniyorum. Örneğin, sabit genişlikli bir alanın% 33'ünün sütun kimliği varsa, o zaman birileri oraya uygun şekilde metin tasarlayabilir, ancak daha geniş bir% 34 sütununa taşındığında, metin satırları yanlış yerlerde kırılabilir. - Markus von Broady
genişlik:% 34 kesinlikle yanlıştır. Çalışmayacak! - Ganesh Babu
Bu çalışmıyor. - Adam McCombs
Bunu başarmanın doğru yolu olduğuna inanmıyorum. Düzensizlik göze hitap etmiyor, fark yaratıyor - Yann Chabot
@Babydead neden genişliğe gitmiyor: calc (100% / 3); ? - Yann Chabot


kullanım CSS  calc():

body {
  margin: 0;
}

div {
  height: 200px;
  width: 33.33%; /* as @passatgt mentioned in the comment, for the older browsers fallback */
  width: calc(100% / 3);
  display: inline-block;
}

div:first-of-type { background-color: red }
div:nth-of-type(2) { background-color: blue }
div:nth-of-type(3) { background-color: green }
<div></div><div></div><div></div>

JSFiddle


Referanslar:


Güncelleştirme: 2018 olduğu gibi. FlexBox - daha fazla yok inline-block  Beyaz boşluk sorunlar:

body {
  margin: 0;
}

#wrapper {
  display: flex;
  height: 200px;
}

#wrapper > div {
  flex-grow: 1;
}

#wrapper > div:first-of-type { background-color: red }
#wrapper > div:nth-of-type(2) { background-color: blue }
#wrapper > div:nth-of-type(3) { background-color: green }
<div id="wrapper">
  <div id="c1"></div>
  <div id="c2"></div>
  <div id="c3"></div>
</div>

Ya da CSS tablosu Bir ızgara oluşturuyorsanız.

body {
  margin: 0;
}

#wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(200px, auto);
}

#wrapper>div:first-of-type { background-color: red }
#wrapper>div:nth-of-type(2) { background-color: blue }
#wrapper>div:nth-of-type(3) { background-color: green }
<div id="wrapper">
  <div id="c1"></div>
  <div id="c2"></div>
  <div id="c3"></div>
</div>


75
2017-09-13 08:48



Bu yöntemdeki sorun, IE9'un altında bir şey tarafından desteklenmiyor. Sadece dahili olarak, onu destekleyen herhangi bir şeyi çalıştıran makinelerde kullanılıyorsa, sorun yoktur. Büyük ölçekli bir üretimde kullanılıyorsa değil. - BenM
Bu yüzden koydum kullanabilirmiyim bağlantı. OP'nin eski tarayıcı desteğine ihtiyacı yoksa, calc sadece iyi yapacak saf CSS çözümü). - Vucko
Ben bu çözümü biliyorum, tıpkı BenM'in dediği gibi, daha çok çapraz tarayıcı çözümü arıyorum. Örneğin, androidde gösterilecek, orada CALC işlevini kullanamıyorum. Ama Fikir iyidir. +1 - Ing. Michal Hudak
insert genişliği:% 33; kireç genişliğinden önce, tarayıcı tarafından desteklenmiyorsa, neredeyse% 33'lük çözüme geri dönecektir. - passatgt
display: inline-block ızgara sistemi için iyi değil, eğer divlarınız arasında boşluk varsa, son div sonraki satıra gider. - ghanbari


CSS3 flex modelini kullanmaya ne dersiniz?

HTML Kodu:

<div id="wrapper">
    <div id="c1">c1</div>
    <div id="c2">c2</div>
    <div id="c3">c3</div>
</div>  

CSS Kodu:

*{
    margin:0;
    padding:0;
}

#wrapper{
    display:-webkit-flex;
    -webkit-justify-content:center;

    display:flex;
    justify-content:center;

}

#wrapper div{
    -webkit-flex:1;
    flex:1;
    border:thin solid #777;

}

16
2017-09-13 10:37



Bu, satırlarla çalıştığınızda ve eşit olmayan bir sayı ile sona erdiğinde, son satırı% 100'e kadar gerecek korkunç yan etkiye sahiptir :) - NoobishPro


kullanma bu kemanile oynayabilirsiniz width her div. Hem Chrome hem de IE'de denedim ve genişlik arasında bir fark olduğunu fark ettim 33% ve 33.3%. Ayrıca, aralarında çok küçük bir fark olduğunu fark ettim 33.3% ve 33.33%. Bundan daha fazla bir fark görmüyorum.

Arasındaki fark 33.33% ve teorik 33.333...% sadece 0.00333...%.

Argümanlar için, ekran genişliğimin olduğunu söyle 1960px; oldukça yüksek ancak ortak bir çözünürlük. Bu iki genişlik arasındaki fark hala sadece 0.065333...px.

Yani, iki ondalık basamaktan daha fazlası, hassasiyetteki fark göz ardı edilebilir.


8
2017-09-13 09:07





Eğer merak ediyorsanız, In çizme atkısı templasyon sistemi (ki bu çok doğrudur), burada .col-md-4 (12 kolon sisteminin 1 / 3'ü) sınıfını uygularken sütunları nasıl böldükleri

CSS

.col-md-4{
    float: left;
    width: 33.33333333%;
}

Kayan nokta hayranı değilim, ama eğer elemanınızın gerçekten sayfanızın 1 / 3'ü olmasını istiyorsanız, o zaman bir seçeneğiniz yoktur çünkü bazen satır içi-blok elemanını kullandığınızda, tarayıcınızdaki alanı Mükemmel 1/3 kırmak 1px alan olarak HTML. Umarım yardımcı oldu!


6
2018-05-01 15:17





Sadece birisi hala cevabı arıyorsa

tarayıcının buna dikkat etmesine izin ver. Bunu dene:

  • display: table konteyner elemanında.
  • display: table-cell Çocuk elemanları üzerinde.

Tarayıcı, 3 veya 10 sütununuz olup olmadığını eşit olarak böler.

DÜZENLE

konteyner elemanı da olmalıdır: table-layout: fixed aksi halde tarayıcı her elemanın genişliğini belirler (çoğu zaman o kadar da kötü değildir).


5
2018-02-20 18:29





Sadece bu sorunu düzeltmek için alternatif bir yol sunmak (IE'yi desteklemeyi gerçekten önemsemiyorsanız):

Yumuşak kodlanmış bir çözüm kullanmak display: table (IE7'de destek yok) ile birlikte table-layout: fixed (eşit genişlik sütunları sağlamak için).

Bu konuda daha fazla bilgi edinin İşte.


2
2017-09-13 09:19