CSS şamandıralarını tek bir satırda nasıl tutabilirim?

float: leftSoldaki öğeyi kullanarak aynı satırda iki öğe olmasını istiyorum .

Bunu tek başına başarmakta hiç sorun yaşamıyorum. Sorun şu ki, tarayıcıyı çok küçük boyutlandırsanız bile iki öğenin aynı satırda kalmasını istiyorum . Bilirsiniz ... tablolarla nasıl olduğu gibi.

Amaç, ne olursa olsun , öğenin sağdan sarılmasını önlemektir .

CSS kullanarak tarayıcıya , div'in altında kalmasını sağlamaktan ziyade içerenleri uzatmayıdiv nasıl söyleyebilirim ?float: right;float: left; div

istediğim:

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /

Kayan reklamlarınızı, bu çapraz tarayıcı minimum genişlik kesmek kullanan <div>bir kaba sarın <div>:

.minwidth { min-width:100px; width: auto !important; width: 100px; }

Sen olabilir ayrıca set "taşma" ama muhtemelen gerekir.

Bu çalışır çünkü:

• !importantİle birlikte beyan, min-widthneden her şeyi IE7 + aynı hat üzerinde kalmak için
• IE6 uygulanmaz min-width, ancak bildirimi width: 100pxgeçersiz kılan !importantve kap genişliğinin 100 piksel olmasına neden olan bir hata vardır .

Başka bir seçenek, kayan yerine, beyaz boşluk özelliği nowrap öğesini bir üst div öğesine ayarlamaktır:

.parent {
     white-space: nowrap;
}

ve beyaz boşluğu sıfırlayın ve bölmeler aynı satırda kalması için bir satır içi blok ekranı kullanın, ancak yine de bir genişlik verebilirsiniz.

.child {
    display:inline-block;
    width:300px;
    white-space: normal;
}

İşte bir JSFiddle: https://jsfiddle.net/9g8ud31o/

Flatörlerinizi, flatörlerin birleşik genişliği + kenar boşluğundan daha az minimum genişliğe sahip bir div içine sarın.

Kesmek veya HTML tabloları gerekmez.

Çözüm 1:

display: table-cell (yaygın olarak desteklenmez)

Çözüm 2:

tablolar

(Hacklerden nefret ediyorum.)

Başka bir seçenek: Sağ sütununuzu yüzdürmeyin; şamandıranın ötesine taşımak için sol marj verin. IE6'yı düzeltmek için bir veya iki hack'e ihtiyacınız olacak, ancak bu temel fikir.

Kayan blok düzeyi öğelerin bu soruna en iyi çözüm olduğundan emin misiniz?

Genelde bende CSS zorluklarla o sebebi İstediğim şeyi yapmanın bir yolunu göremiyorum çıkıyor benim biçimlendirme yapabilirim nasıl (düşünme" konusunda bir tünel vizyon yakalandılar olmasıdır bunlar elementler yapmak bu ?") yerine geri dönüyor ve tam olarak ben başarmak ve belki de bu kolaylaştırmak için hafifçe benim html reworking gerekiyor ne bakarak daha.

Bu sorun için tabloları kullanmanızı tavsiye ederim. Ben benzer bir sorun yaşıyorum ve tablo sadece bazı verileri görüntülemek için kullanılır ve ana sayfa düzeni için iyi olduğu sürece.

Bu satırı kayan öğe seçicinize ekleyin

.floated {
    float: left;
    ...
    box-sizing: border-box;
}

Dolgu ve kenarlıkların genişliğe eklenmesini önleyecektir, bu nedenle örneğin, örneğin, her zaman satırda kalmalıdır. % 33.33333 genişliğe sahip üç eleman

Kullanıcı pencere boyutunu yatay olarak küçültdüğünde ve bu durum yüzerlerin dikey olarak istiflenmesine neden olduğunda, yüzdürmeleri kaldırın ve ikinci bölmede (şamandıra) kenar boşluğu kullanın: -123px (değeriniz) ve sol kenar boşluğu: 444px (değeriniz) divleri şamandıralarla göründükleri gibi konumlandırın. Bu şekilde yapıldığında, pencere daraldığında, sağ taraftaki div yerinde kalır ve sayfa eklemek için çok dar olduğunda kaybolur. ... tarayıcı penceresi kullanıcı tarafından daraltıldığında (bana göre) sağ taraftaki div'in sol taraftaki div'in altından "zıplaması" daha iyidir.

Ben bu şekilde var bazı jQuery kullanmak oldu. Bunu bu şekilde yapmamın nedeni A ve B'nin yüzde genişlik olmasıydı.

HTML:

<div class="floatNoWrap">
    <div id="A" style="float: left;">
        Content A
    </div>
    <div id="B" style="float: left;">
        Content B
    </div>
    <div style="clear: both;"></div>
</div>

CSS:

.floatNoWrap
{
    width: 100%;
    height: 100%;
}

jQuery:

$("[class~='floatNoWrap']").each(function () {
    $(this).css("width", $(this).outerWidth());
});