Kaydırmadan "float: left" nasıl yapılır?

Belirli bir genişliğe sahip olan (içeriğine bağlı olarak değişebilen) bir kapsayıcım var box1. Bu kutu, sabit bir genişliğe sahip olan (bir simge olabilir) box2 içerir. box2'un yanında, bazı metinlerle birlikte box3 var. Metnin, box2'un sağında bulunan tüm alanı kullanmasını istiyorum. HTML aşağıda yapıştırılan ile elde edersiniz:Kaydırmadan "float: left" nasıl yapılır?

Short text

Şimdiye kadar iyi. Metin uzarsa, box2 (istediğim şey) etrafına sarılmaz, ancak box1'u büyütmüyor, bu benim sorunum. Bana "Hey, box3'u position: absolute yapsaydın, box1'u büyütmeyi nasıl başarabilirdin?" Diyeceksin. Öyleyse, o zaman, box2'un yanında göstermek için box3'u nasıl alabilirim, kullanılabilir tüm yatay alanı kullanabilir ve gerekirse box1'u büyüyebilir miyim?

Long text

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
     <style type="text/css"> 
      #box1 { position: relative } 
      #box3 { position: absolute; left: 2.5em; right: .5em; top: .5em } 

      /* Styling */ 
      #box1 { background: #ddd; padding: 1em 0.5em; width: 20em } 
      #box2 { background: #999; padding: .5em; } 
      #box3 { background: #bbb; padding: .5em; } 
      body { font-family: sans-serif } 
     </style> 
     <script type="text/javascript"> 
     </script> 
    </head> 
    <body> 
     <div id="box1"> 
      <span id="box2">2</span> 
      <span id="box3">3</span> 
     </div> 
    </body> 
</html>

kaynak

2011-04-19 avernet

ikinci resimde benzemeye:

daha yaygın, çağdaş çözüm ::after sözde eleman kullanabilir ve böylece o temizlemektir ve box1'in box2 ve box3'ü kapatmak için aşağı doğru genişlemesini tercih eder miydi? – DaveGauer

Bir blok düzeyi unsuru olmaya kutusunu 3 ihtiyacım (? I ileriye IE6 bu işi istiyorum, ve bir tablo kullanmaktan kaçınmak için söylemek gerekir mi), bu yüzden kullanmak display:block ve sonra float kutu 2 -ing ile birlikte bir overflow:hidden atmak:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
     <style type="text/css"> 
      #box1 { } 
      #box2 { float:left; } 
      #box3 { display:block;overflow:hidden; } 

      /* Styling */ 
      #box1 { background: #ddd; padding: 1em 0.5em; width: 20em } 
      #box2 { background: #999; padding: .5em; } 
      #box3 { background: #bbb; padding: .5em; } 
      body { font-family: sans-serif } 

     </style> 
     <script type="text/javascript"> 
     </script> 
     <title>How to do a `float: left` with no wrapping?</title> 
    </head> 
    <body> 
     <div id="box1"> 
      <span id="box2">2</span> 
      <span id="box3">3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br /></span> 
     </div> 
    </body> 
</html>

şaşırtıcı her şeyi overflow:hidden yapabilirsiniz: D

kaynak

2011-04-19 00:57:47

bu harika çalışıyor, teşekkürler! Bu çözümü burada daha ayrıntılı olarak belgeledim (“taşma: gizli” nin neden bu etkiyi bildiğini bilmek istiyorum) ve ayrıca bir “kenar boşluğu” kullanan başka bir çözüm önerdim: http: //wiki.orbeon .com/forms/doc/contributor-guide/browser # TOC Önleme-a-box-from-below-below- – avernet

@ avernet'in bağlantısı ilgili bölüme işaret etmiyor. İşte doğru bağlantı http://wiki.orbeon.com/forms/doc/contributor-guide/browser#TOC-Prevent-a-box-from-extending-below-a-float –

'taşma: gizli' gerçekten çok çalışıyor Bu da dahil olmak üzere birçok durumda iyi. Ancak, tahta boyunca daha tutarlı bir şekilde çalışan bir çözüm, @ hesselbom'un cevabında belirtilen açıklıktır. Hala çok esnek olan (yani 12 sütunlu bir düzen ile sınırlı olmayan) tam teşekküllü bir ızgara çözümü için bkz. Http://csswizardry.com/2013/02/responsive-grid-systems-a-solution/. Ayrıca http://purecss.io/ ve http://materializecss.com/ adreslerine de bakın. –

-3

aşağıdaki öneriyoruz: #box2 sabit boyutta ise

#box1 
{ 
    position: relative; /* or some other positioned value */ 
} 

#box2 
{ 
    width: 10px; 
    height: 10px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

#box3 
{ 
    margin-left: 10px; 
}

, sadece #box2 onun üste binmesini önlemek için #box3 için bir marj kullanabilir ve bu konumlandırılmış değil, çünkü #box1#box3 olarak büyüyecek büyür.

kaynak

2011-04-19 00:59:50 Jacob

zaman ayırdığınız için teşekkürler, ama bu benim için çalışmıyor. İşte önerdiğiniz stilin HTML'si: http://goo.gl/dNWp4. @ Richard'ın önerisi (http://goo.gl/3H96P) benim için çalışıyor, bu nedenle özellikle ilgilenmediğiniz sürece, bunun için endişelenmenize gerek yok. – avernet

Ah, onların açık ve kapalı olmalarını özledim. Onlarda bir "display: block" kullanılıyorsa, daha iyi çalışmalıdır. – Jacob

Görüyorum ve bir 'display: block' kullanarak çalıştınız. Kutu 2 'deki' position: mutute 'ile kutu 3 üzerinde' margin-left 'kombinasyonunu kullanırsınız, böylece kutu 2'yi örtmezsiniz. Bunun yerine kutu 2'de bir "float: left" kullanarak çok benzer bir çözüm buldum. 'pozisyonu: mutlak'. Bu bölümdeki "çözüm 2" bölümüne bakın: http://wiki.orbeon.com/forms/doc/contributor-guide/browser#TOC-Prevent-a-box-from-extending-below- – avernet

Bunu başarmanın birkaç yolu vardır. İki yaygın olanları ya (sadece demo için satır içi css) şöyle bir clear: both ile hemen sonra boş bir öğesi sahip olmaktır:

<span class="box1">...</span> 
<br style="clear:both"/>

başka yolu da overflow: hidden şöyle kullanmaktır:

<span class="box1" style="overflow: hidden">...</span>

Ancak, Bu çözümlerin her ikisinde de sorunlar var. İlki ile gereksiz ve çirkin işaretler ekliyorsunuz. Ve ikincisiyle, kutunun dışında bir şeyin konumlanmasını istiyorsanız (position: absolute gibi) görünmeyecektir. Sırf, sen sonucu için net istemeyen ediyorum

.box1::after { 
    content: ''; 
    display: table; 
    clear: both; 
}

kaynak

2013-12-03 09:47:43 hesselbom

Kaydırmadan "float: left" nasıl yapılır?

cevap

İlgili konular