• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

float: left;

Aruba Cloud - Virtual Private Server VPS
+1 głos
1,101 wizyt
pytanie zadane 1 kwietnia 2021 w HTML i CSS przez Nearr Obywatel (1,890 p.)
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Naxis.io</title>
    <meta name="description" content="" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css"/>
    <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
    <script src="main.js" async></script>
</head>

<body>
            <div class="container">
                <a href="#" target="_blank">
                    <span class="pp">Privacy Policy</span></a>
                <span class="line">|</span>
                <a href="#" target="_blank">
                    <span class="tos">Terms of Service</span></a>
            </div>

            <div id="main-container">
                <div id="server-list" class="main-boxes">
                    <div class="tabs"></div>
                </div>
                <div id="player-container" class="main-boxes"></div>
                <div id="skin-list" class="main-boxes" class="scrollbar"></div>
                <div id="profile-container" class="main-boxes"></div>
                <div style="clear: both;"></div>
            </div>   
</body>
</html>
body {
    box-sizing: border-box;
    padding: 0; 
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #242424;
    color: #fff;
    font-family: 'Nunito', sans-serif;
}

.container {
    position: absolute;
    top: 10px;
} 

.pp , .container > a {
    text-decoration: none;
    color: #fff;
}

#server-list {
    float: left;
    width: 300px;
    height: 462px;
}

#player-container {
    float: left;
    width: 320px;
    height: 462px;
}

#profile-container {
    float: left;
    width: 300px;
    height: 146px;
}

#skin-list {
    float: left;
    width: 300px;
    height: 280px;
}

.main-boxes {
    margin: 7px;
    border-radius: 3px;
    background-color: #161616;
    box-shadow: 0 0 4px 1px #0a0a0a;
    border: 1px solid #000;
}

.scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 00px;
  }
  
  .scrollbar::-webkit-scrollbar-track {
    background-color: #0c0c0c;
  }
  
  .scrollbar::-webkit-scrollbar-thumb {
    background-color: rgb(95, 95, 95);
    border-radius: 50px;
  }
  
  .scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgb(61, 61, 61);
    border-radius: 50px;
  }


Jak przestawić div'a zaznaczonego na czerwono na miejsce zaznaczeone na niebieski.
Jak w style.css dawałem float: left; działa się to co na obrazku, a jak usuwałem float: left; to był pod div'ami zaznaczonymi na czarno, przez co nie wiem jak mam ustawić tego div'a.

5 odpowiedzi

+4 głosów
odpowiedź 1 kwietnia 2021 przez niezalogowany

Może warto by się zastanowić nad porzuceniem przestarzałego i mocno frustrującego w niektórych przypadkach   floata i przy okazji pracy nad projektem zapoznać się z technologią 

flexbox?

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

i grid ?

https://css-tricks.com/snippets/css/complete-guide-grid/

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

Pozdrawiam i miłego dnia winkyes

komentarz 1 kwietnia 2021 przez Nearr Obywatel (1,890 p.)
Zacząłem już budować strukturę za pomocą grid'a.

I mam problem z tym samym div'em
1
komentarz 1 kwietnia 2021 przez niezalogowany

Nie spiesz się spokojnie przyswój wiedzę i eksperymentuj wink Dasz radę yes

2
komentarz 1 kwietnia 2021 przez Comandeer Guru (606,920 p.)

@niezalogowany, takie drobne dopowiedzenie: float nie jest przestarzały. Jak najbardziej się sprawdza w tym, do czego został stworzony – do opływania tekstu.

On po prostu nigdy nie był tworzony z myślą o pisaniu layoutów, a stosowało się go, bo nie było nic innego. W tym jednym zastosowaniu jest przestarzały.

0 głosów
odpowiedź 1 kwietnia 2021 przez pablop76 VIP (123,540 p.)
Wrzuć go do kontenera razem z trzecim elementem
komentarz 1 kwietnia 2021 przez Nearr Obywatel (1,890 p.)
ale wszystko jest w jednym kontenerze
komentarz 1 kwietnia 2021 przez pablop76 VIP (123,540 p.)
edycja 1 kwietnia 2021 przez pablop76
Jakie to ma znaczenie? Dodaj kolejny dla tych dwóch elementów.
0 głosów
odpowiedź 1 kwietnia 2021 przez kajman_Rrzeczny Użytkownik (960 p.)
<div id="container">
        <div class="square">
            
        </div>
        <div class="square">
            
        </div>
    </div>
        
    
    
    <div id="mainContainer"> 
        <div class="mainSquare">
    
        </div>
        <div class="mainSquare">
    
        </div>
    </div>
#container {
    float: left;
}
#mainContainer {
    float: left;
}

.square {
    width: 100px;
    height: 200px;
    background-color: black;
    margin: 10px;
    float: left;
}

.mainSquare {
    width: 100px;
    height: 100px;
    background-color: rgb(192, 36, 36);
    margin: 10px;
    
}
   

efekt:

za pomocą technologi float, flexbox i grid są lepszym rozwiązaniem ale mechaniki floata też wypada znać.

0 głosów
odpowiedź 3 kwietnia 2021 przez KlemensGak Bywalec (2,390 p.)

Te dwa divy zaznaczone na czarno włóż do jednego diva, a dwa pozostałe do drugiego diva. Szerokość divów ustal tak, by nie były obok siebie, tylko wskakiwał pod trzeci kwadrat. Coś takiego:

<div id="boxy">
<div id="kwadraty zaznaczone na czarno">
 <div id="kwadrat-czarny1"></div>
<div id="kwadrat-czarny2"></div>
</div>
<div>
<div id="kwadrat1"></div>
<div id="kwadrat2"></div>
</div>
</div>
 
0 głosów
odpowiedź 3 kwietnia 2021 przez VBService Ekspert (256,600 p.)
edycja 4 kwietnia 2021 przez VBService

Linia 29, jest błąd:

<div id="skin-list" class="main-boxes" class="scrollbar"></div>

gdy chcemy "przypisać" więcej klas do elementu, "oddzielamy" je po prostu spacjami

<div id="skin-list" class="main-boxes scrollbar"></div>

HTML class Attribute - Multiple Classes ]

 

<div id="main-container">
  <div id="server-list" class="main-boxes">
    <div class="tabs"></div>
  </div>
  <div id="player-container" class="main-boxes"></div>
  <div id="skin-list" class="main-boxes scrollbar">
    <p style="height: 1000px">Scroll test</p>
  </div>
  <div id="profile-container" class="main-boxes"></div>
  <div style="clear: both;"></div>
</div>
* {
  box-sizing: border-box;
}
body {    
  padding: 0; 
  margin: 0;
  background-color: #242424;
  color: #fff;
  font-family: 'Nunito', sans-serif;
}
#main-container {
  width: 95vw;
  margin: 0 auto;
}
#server-list {
  float: left;
  width: 300px;
  height: 462px;
}
#player-container {
  float: left;
  width: 320px;
  height: 462px;
}
#profile-container {
  float: left;
  width: 300px;
  height: 168px;
}
#skin-list {
  float: left;
  width: 300px;
  height: 280px;
  overflow-y: auto;
}
.main-boxes {
  margin: 7px;
  border-radius: 3px;
  background-color: #161616;
  box-shadow: 0 0 4px 1px #0a0a0a;
  border: 1px solid #000;
}
.scrollbar::-webkit-scrollbar {
  width: 8px;
}
.scrollbar::-webkit-scrollbar-track {
  background-color: #0c0c0c;
}
.scrollbar::-webkit-scrollbar-thumb {
  background-color: rgb(95, 95, 95);
  border-radius: 50px;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgb(61, 61, 61);
}

 

Podobne pytania

0 głosów
2 odpowiedzi 493 wizyt
pytanie zadane 12 lutego 2023 w HTML i CSS przez koderro Nowicjusz (120 p.)
+1 głos
1 odpowiedź 196 wizyt
pytanie zadane 1 sierpnia 2022 w HTML i CSS przez Maverick700 Nowicjusz (160 p.)
0 głosów
3 odpowiedzi 511 wizyt
pytanie zadane 2 sierpnia 2020 w HTML i CSS przez niezalogowany

93,335 zapytań

142,331 odpowiedzi

322,415 komentarzy

62,670 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...