Soru Float kullanmadan sola / sağa nasıl hizalanırsınız?


böyle bir şey yaparken:

<div style="float: left;">Left Div</div>
<div style="float: right;">Right Div</div>

Boş bir div kullanmalıyım

clear: both;

Bu bana çok kirli geliyor.

Yani, float kullanmadan hizalamak için bir yolu var mı?

Özellikle: burada benim keman var: http://jsfiddle.net/58pRG/

İçerdiği yatay çubuğun sağındaki yeşil düğmeyi istiyorum ama mümkün olan en temiz şekilde.

Sadece CSS'yi zarif, temiz, vb. Yapmayı öğrenmeye çalışıyorum.


51
2018-01-09 20:30


Menşei


jsfiddle.net/58pRG/1 - Roko C. Buljan
eğer sadece boş olanı ortadan kaldırmaya çalışıyorsan div o zaman bir temizle düzelt  class - danferth


Cevaplar:


Buradaki durumda, bu yeşil düğmeyi sağa hizalamak istiyorsanız, her şeyi doğru hizalamak için yalnızca bir div değerini değiştirin:

<div class="action_buttons_header" style="text-align: right;">

Div zaten bu bölümün tam genişliğini alıyor, bu yüzden yeşil düğmeyi sağa hizalayarak sağa kaydırın.


42
2018-01-09 20:39



Bunu denedim ... ve işe yarıyor ... ama düğmenin dikey olarak ortalanması için dikey kenar boşluğu olmayacak. belki başka bir şey sorun jsfiddle.net/58pRG/2 - NullVoxPopuli
Çizgi yüksekliği ekle: 38px; başlık sınıfına: .action_buttons_header {text-align: right; çizgi yüksekliği: 38px; } - NYSystemsAnalyst


Benzer bir şey yapmanın başka bir yolu, bir sarıcı eleman üzerindeki esnek kutu ile, yani,

HTML:

<div class="row">
    <div>Left</div>
    <div>Right</div>
</div>

CSS:

.row {
    display: flex;
    justify-content: space-between;
}

https://jsfiddle.net/p5pk0sd6/


33
2018-03-04 21:03



flex bir ekran mıdır? o.o developer.mozilla.org/en-US/docs/Web/CSS/display Woah. En son kontrol ettiğimden beri çok benzer. - NullVoxPopuli
Tarayıcı desteği oldukça iyidir, ancak ara sıra bunu yapmanız gerekir. Bu esnek öğrenme için çok iyi bir site: flexboxfroggy.com - myrcutio
@myrcutio Bunun için çok teşekkürler. Tam olarak ihtiyacım olanı yaptım ve çok temiz. - woot
@myrcutio artı 1 - wordpress_designer


gibi şeyler kullanabilirsiniz display: inline-block ama bence onu hareket ettirmek için başka bir div ayarlaman gerekecek, eğer düğmenin soluna gidecek bir şey yoksa, marjları yerine oturtmak için kullanabilirsiniz.

Alternatif olarak iyi bir çözüm değil, etiketleri konumlandırabilirsiniz; kuşatıcı div position: relative ve sonra düğmesinin div olarak position: absolute; right: 0ama dediğim gibi bu muhtemelen en iyi çözüm değil

HTML

<div class="parent">
  <div>Left Div</div>
  <div class="right">Right Div</div>
</div>

CSS

.parent {
  position: relative;
}
.right {
    position: absolute;
    right: 0;
}

11
2018-01-09 20:38



bu oldukça iyi bir çözüm - SoluableNonagon
Bunu en iyi çözüm olarak görüyorum. Boşluk doldurmak için satır blok konteynerini görüntüleyin, satır içi bloğu sağa doğru hizalayın, tüm float başlarını atlayın ve kenar boşluğu ve dolgu gibi güzel şeyler elde edin. - Andrew Hoffman


Kirli daha iyi kullanmak overflow: hidden; kesmek:

<div class="container">
  <div style="float: left;">Left Div</div>
  <div style="float: right;">Right Div</div>
</div>

.container { overflow: hidden; }

Ya da bazı süslü CSS3 alt gölge nesneleri yapacaksanız ve yukarıdaki çözümle ilgili sorunla karşılaşırsanız:

http://web.archive.org/web/20120414135722/http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack

PS

Temiz için gitmek istiyorsanız, onun yerine inline javascript hakkında endişelenmeyi tercih ederim overflow: hidden; hack :)


10
2018-01-09 20:33



yine de neden bir hack olmak zorunda? Bunu yapmak için uygun, temiz bir yol yok mu? - NullVoxPopuli
@ TheLindyHop güvenilir değil hayır :-) Ama en azından ile overflow: hidden kesmek ekstra (semantik olmayan) elemanlar eklemek zorunda değilsiniz. - PeeHaa
idk, biraz oynayacağım. Ve inline js gelince, çalıştığım uygulama çok devam eden bir şey. Ve çok modüler, bu yüzden bazen ajax yerine = D denildiğinde çalıştırılan satır içi js olmalıdır. - NullVoxPopuli
@TheLindyHop bu satır içi js kullanmak için gerçekten nedenleri değildir. Aslında hiç yapmak için iyi bir sebep yok IMHO :-) - PeeHaa
raylar üzerinde ruby ​​'link_to ve link_to_remote kullanın = \ - NullVoxPopuli


Yüzde bir marj solu kullanabilirsiniz.

HTML

<div class="goleft">Left Div</div>
<div class="goright">Right Div</div>

CSS

.goright{
    margin-left:20%;
}
.goleft{
    margin-right:20%;
}

(goleft varsayılan ile aynı olurdu, ancak gerektiğinde tersine çevirebilir)

Metin hizalama, her zaman düzen seçenekleri için tasarlandığı gibi çalışmaz, yalnızca metin içindir. (Ama genellikle form öğeleri için de kullanılır).

Bunu yapmanın son sonucu, float ile div'a benzer bir etkiye sahip olacaktır: sağ; ve genişlik:% 80 ayarlandı. Bunun dışında, float iradesi gibi bir araya toplanmayacak. (Gelen öğelerin varsayılan görüntüleme özelliklerini kaydetme).


2
2017-07-09 14:17





Başka bir çözüm, aşağıdaki gibi bir şey olabilir (öğenizin görüntüleme özelliğine bağlı olarak çalışır):

HTML:

<div class="left-align">Left</div>
<div class="right-align">Right</div>

CSS:

.left-align {
  margin-left: 0;
  margin-right: auto;
}
.right-align {
  margin-left: auto;
  margin-right: 0;
}

1
2018-04-10 23:12





Ekstra eleman eklemenize gerek yok. Ne olduğunu biliyorsanız, flexbox çok sezgisel olmayan özellik isimleri kullanırken kutu kendini sık sık kullanarak bulacaksınız.

<div style="display: flex; justify-content: space-between;">
<span>Item Left</span>
<span>Item Right</span>
</div>

Buna sık sık ihtiyaç var mı?

.align_between {display: flex; justify-content: space-between;}

Birincil pozisyonda ikincil sözcükler kullanan diğer insanları görüyorum ki bu da bilgi hiyerarşisine bulaşıyor. Eğer hizalamak birincil görev ve sağ, ayrıldıve / veya arasında sekonder sınıf meli olmak .align_outer, değil  .outer_align kodunuzu dikey olarak tararken mantıklı olacaktır:

.align_between {}
.align_left {}
.align_outer {}
.align_right {}

Zamanla iyi alışkanlıklar, daha çabuk yatmanızı sağlar.


0
2018-06-05 14:56