Podział CSS lewy i prawy nowrap

Nieco tła: Pracuję nad nagłówkiem, który obejmuje cały z na górze mojej strony. Chciałbym, aby obecna nazwa użytkownika, przycisk wylogowania itp. Znalazły się po prawej stronie nagłówka i chciałbym, aby logo i niektóre navitemy były po lewej stronie. Kiedy okno przeglądarki kurczy się tak, że lewa pozycja i właściwe elementy kolidują, NIE chcę, żeby się zawijały. Mam div zestawu nagłówka-kontenera przepełnionego: auto, więc chciałbym aby zaczął przewijanie.Podział CSS lewy i prawy nowrap

Pytanie: Nawet gdy mam element div float: left i div float: right oba z display: inline-block, a parent z white-space: no wrap - the wrap !!! Przez przypadek zorientowałem się, że mogę go uruchomić, zamykając jeszcze jeden dział również z wyświetlaczem: wbudowany blok. Dlaczego to???

Poniżej znajduje się mój kod i działający jsfiddle, pokazujący zarówno działającą konfigurację, jak i konfigurację, która się owija. Nie rozumiem, dlaczego potrzebuję dodatkowego diva. http://jsfiddle.net/klyngbaek/tNHLL/9/

Kiedy kurczyć przez okno, nie chcę do drugiego niebieskiego prostokąta spadnie do nowej linii

HTML:

<h2>With extra inline-block dive. The blue rectangles do not wrap.</h2> 
<div class="wrapper nowrap"> 
    <div class="second-wrapper"> 
     <div class="floating float-left">[logo] | home | [navitem1] | [navitem2]</div> 
     <div class="floating float-right">[username] | logout</div> 
    </div> 
</div> 
<h2>Without extra inline-block dive. The blue rectangles do wrap.</h2> 
<div class="wrapper nowrap"> 
    <div class="floating float-left">[logo] | home | [navitem1] | [navitem2]</div> 
    <div class="floating float-right">[username] | logout</div> 
    <div class="clearfix"></div> 
</div>

CSS:

.wrapper { 
    border:#333; 
    margin-bottom:; 
} 
.second-wrapper { 
    border:; 
    display:inline-block; 
    min-width: 100%; 
} 
.nowrap { 
    white-space: nowrap; 
} 
.clearfix { 
    clear: both; 
} 
.floating { 
    background: lightblue; 
    border:; 
    height:; 
    padding:} 
.float-left { 
    float: left; 
} 
.float-right { 
    float: right 
}

A może jest lepszy sposób na osiągnięcie tego, co chcę.

Z góry dziękuję!

edit: zaktualizowane jsfiddle Link

Źródło

2013-05-19 klyngbaek

Myślę, że zapomniałeś rozróżnienia div w skrzypcach i myślę, że powód, dla którego drugi-wrapper rozciąga się, by zawierał oba floate-divs, jest taki, że jego właściwość display jest ustawiona na inline-block. –

Przykład z lewej, prawej górnego i dolnego marginesu dodanej; wielokrotne divy; dostosować wysokość ramy głównej; ustaw lewy margines dla lewej najbardziej lewej pływającej div; i prawy margines prawy najbardziej pływającej Div:

Wynik:

enter image description here

Stylizacja i HTML w jednym pliku:

<html> 
<body> 
<style> 

.row { 
    float:left; 
    border: 3px solid blue; 
    width: 96%; 
    margin-left: 2%; 
    margin-right: 2%; 
    height: 115px; 
    overflow: auto; 
    position: static; 
} 

.floatLeftDiv { 
    display: inline-block; 
    border: 3px solid red; 
    width: 200px; 
    height: 100px; 
    margin-top: 3px; 
} 

.right { 
    float: right; 
    border: 3px solid red; 
    width: 200px; 
    height: 100px; 
    margin-top: 3px; 
    margin-right: 1%; 
} 

</style> 

<div class="row"> 
    <div class="floatLeftDiv" style="margin-left: 1%;">Inline Item A:</div> 
    <div class="floatLeftDiv">Inline Item B:</div> 
    <div class="floatLeftDiv">Inline Item C:</div> 
    <div class="right">Inline Item D:</div> 
</div> 


</body> 
</html>

Zmodyfikowany kod z tej dyskusji i innym.

Źródło

2014-02-02 05:49:28

display: inline-block efekty synów selektora. Oto zaktualizowana wersja, w której usunięto blok wbudowany z elementów potomnych.

http://jsfiddle.net/ccsuP/

Musiałbym zobaczyć znaczników strony, którą próbujesz układzie. Zastanawiam się, czy korzystanie z pozycjonowania może być najlepszym sposobem.

Tutaj to sprawdzić i dać mi znać, jeśli to pomoże: http://jsfiddle.net/taUgM/

* { Box-sizing: Border-box } 

.wrapper { 
    border: 1px dashed #333; 
    margin-bottom: 10px; 
    overflow: auto; 
width: 100%; 
    position:absolute; 
} 
.box{ 
    width:50px; 
    height:50px; 
    border:1px solid yellow; 
    display:block; 
    position: relative; 
} 

.title-etc{ 
    top:0; 
    left:0 
    float:left;   
    background:blue; 
} 
.login-box{ 
    top:0; 
    right:0; 
    float:right; 
     background:red; 
}

Źródło

2013-05-19 19:37:00 BingeBoy

Dzięki za komentarz. Może nie było dla mnie jasne z mojego pytania.Nie interesuje mnie zawartość zawijanych prostokątów. Obawiam się, że 2 niebieskie prostokąty zawijają się, gdy okno przeglądarki staje się zbyt małe. Twój dodany przykład w jsfiddle ma drugi prostokąt kropli do nowej linii, gdy okno staje się zbyt małe. Tego właśnie próbuję uniknąć. Dzięki! – klyngbaek

Sprawdź mój drugi link, który pokazał rozwiązanie: http://jsfiddle.net/taUgM/ – BingeBoy

Dzięki. Wygląda na to, że brakuje tu średnika "left: 0 float: left;" w tytule klasy - itp. Jeśli dodaję średnik, zaczyna się on ponownie owijać. Jednak jeśli zabiorę pływak: po lewej stronie wydaje się działać! http://jsfiddle.net/kristianlyngbaek/taUgM/1/ – klyngbaek

Podział CSS lewy i prawy nowrap

Odpowiedz

Powiązane problemy