float: left;

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

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

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 Dasz radę

komentarz 1 kwietnia 2021 przez Comandeer Guru (600,810 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.

odpowiedź 1 kwietnia 2021 przez pablop76 VIP (123,120 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,120 p.)
edycja 1 kwietnia 2021 przez pablop76

Jakie to ma znaczenie? Dodaj kolejny dla tych dwóch elementó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ć.

odpowiedź 3 kwietnia 2021 przez KlemensGak Bywalec (2,210 p.)

odpowiedź 3 kwietnia 2021 przez VBService Ekspert (253,120 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);
}