Bir margin: 0 33% 0 0; ancak ben de marjı en az belli px miktar olduğundan emin olmak istiyorum belirledik. CSS'de min-margin olduğunu biliyorum, bu yüzden burada herhangi bir seçeneğim olup olmadığını merak ediyordum?CSS'de bir yüzde marjı kullanmak, ancak piksel cinsinden minimum marj mı istiyorsunuz?
'u, öğenizin sağında width ve statik min-width ile yerleştirin.
<div style="position:relative; float:left; margin:0">
<div style="position:relative; float:left; width:33%; min-width:200px">
Bu yaklaşım, diğer kayan öğelerin kullanımını önler ve üst divların içinde 'clear' (engellenir). Bu, düzenin istenmeyen konumlara itilmesine neden olur. Bunun için bir düzeltme yukarıdaki üst divlarda 'overflow: hidden' ayarlanmasıdır, ancak bu gerçekten isteksiz bir senaryo değildir ve HTML araç ipuçları gibi öğelerin kullanımını kısıtlar, çünkü bunlar harici olmayanın sınırlayıcı kutusu tarafından kesilebilir. - çıkış yapan div'ler. – Kafoso
İkinci "div" için "float: right" yi kullanmak mı istiyorsunuz? –
Bu nasıl?
body {margin-left: 60px; margin-right: 60px; }
div#container {width:33%;}
Eğer% 100 genişlikte bir gövde kullanıyorsanız, x ekseninde bir taşma olacağından bu bir problem olacaktır. Artık "oveflow-x: hidden" yazabilirsiniz, ancak bu, yeniden boyutlandırmada doğru div öğesinin artmasına neden olacaktır. Zor! –
@CarlPapworth ... veya 'box-sizing'i kullanın: border-box; ':) – Brett
bu
.mm:before {
content: "";
display: inline-block;
width: 33%;
min-width: 200px;
}
Carl Papworth, bu durumda, bu kullanabilirsiniz deneyebilirsiniz:
body {margin-left: 60px; margin-right: 60px; width:calc(100%-120px); }
div#container {width:33%;}
burada gerçek bir çözüm bir medya sorgu kırılma noktası kullanmaktır % 33'ün artık sizin için çalışmadığını ve piksellerdeki minimum kenar boşluğuna göre geçersiz kılınması gerektiğini belirlemek.
/*Margin by percentage:*/
div{
margin: 0 33% 0 0;
}
/*Margin by pixel:*/
@media screen and (max-width: 200px){
div{
margin: 0 15px 0 0;
}
}
max-width% 33 sağ kenar artık sizin için çalışan ne olursa olsun ekran genişliği için değiştirin.
u böyle yapmak zorunda daha sen span kullanıyorsanız:
span{
display:block;
margin:auto;
}
u yapabilirsiniz daha sen div kullanıyorsanız: Ben ettik
div{
margin:auto;
}
Yukarıda belirtilen çözümlerin bir çift ile oynadı, ama bir sıvı ve gerçekten duyarlı bir ortamda, ben en iyi seçenek doğru paddi ayarlamak olduğuna inanıyorum İlgili kutuda/ambalajda. Örnek: Stil:
html {
background-color: #fff;
padding: 0 4em;
}
body {
margin: 0 auto;
max-width: 42em;
background-color: #ddf;
}
Şimdi çeşitli pencere genişlikleri ile etrafa bakın ve aynı zamanda çeşitli yazı tipi boyutlarını deneyin.
Ayrıca working demo'u da deneyin.
belki de bir kenar boşluğu belirlediğiniz kişinin sağında boş bir boşluk kullanarak? ve ayar genişliği:% 33; min-genişlik: npx; İkinci div için mi? Her iki öğeyi de bir konteyner div'ına dahil etmiş ve süzülmüştür ... Bunun işe yarayıp yaramadığına emin değilim ... sadece bir fikir. –
Fikir AR için teşekkür ederiz. – Brett