Saya mencoba membuat bagian div bersebelahan (horizontal). Namun, mereka menghilang ketika saya menggunakan flex sebagai tampilan. Saya menggunakan div wadah sebagai wadah dan div bagian yang memiliki 2 bagian. Kemudian masing-masing bagian ini memiliki blok. Saya telah mencoba untuk membuat bagian-bagian ini tampak berdampingan tetapi mereka tetap berada di atas satu sama lain dan ketika saya mencoba mengubah tampilan untuk melenturkan atau mencoba mengapungkannya, mereka tidak terlihat. Ada ide?

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background: #59537E;
}

#navbar {
  background: #382F6A;
  display: flex;
  justify-content: space-between;
  padding: 25px;
  position: sticky;
  top: 0;
  box-shadow: 0 10px 10px -2px rgba(0, 0, 0, .3);
  height: 70px;
}

nav ul li {
  display: inline-block;
  font-size: 16px;
  margin-left: 20px;
  color: #D2CBF5;
  font-weight: bold;
  margin-top: 7px;
  cursor: pointer;
}

nav ul li:hover {
  color: white;
}

#links {
  display: flex;
}

#links img {
  margin-right: 13px;
}

.container {
  height: 1000px;
  margin: auto;
  max-width: 1150px;
}

.row {
  margin: 40px 20px 25px 20px;
  display: flex;
  justify-content: center;
}

.row a {
  text-decoration: none;
  color: white;
  font-size: 20px;
}

.btn {
  margin: 0px 20px;
  border: 2px white solid;
  padding: 7px 25px;
  border-radius: 20px;
  font-weight: bold;
}

.btn:hover {
  background: white;
  color: #59537E;
  border-color: blanchedalmond;
}

.sections {
  display: flex;
}

.section {
  margin-top: 100px;
  max-width: 500px;
}

.block {
  background: white;
  border-radius: 10px;
  height: 300px;
  margin-top: 25px;
  display: block;
}
<nav id="navbar">
  <div id="links">
    <img src="IMGS/logo-badge.svg" width="32px" height="32px">
    <ul>
      <li>Home</li>
      <li>Courses</li>
      <li>Groups</li>
      <li>Calender</li>
      <li>Support</li>
      <li>BAU</li>
      <li>BAUGO</li>
      <li>BAU Library</li>
    </ul>
  </div>
  <div id="profile">
    <ul>
      <li>Noti</li>
      <li>Msgs</li>
      <li>Khaled</li>
    </ul>
  </div>
</nav>
<div class="container">
  <div class="row">
    <a href="" class="btn">Courses</a>
    <a href="" class="btn">Updates</a>
  </div>
  <div class="sections">
    <div class="section">
      <div class="block">

      </div>

      <div class="block">

      </div>
    </div>

    <div class="section">
      <div class="block">

      </div>

      <div class="block">

      </div>
    </div>
  </div>
</div>
1
Cinemato 10 Januari 2021, 19:07

3 jawaban

Jawaban Terbaik

Anda perlu memberikan lebar ke .section. Suka

  .section {
    margin-top: 100px;
    width: 100%;
    max-width: 500px;
  }

Codepen: https://codepen.io/manaskhandelwal1/pen/mdrGVLd

2
Manas Khandelwal 10 Januari 2021, 16:19
.sections {
  display: flex;
}
.section {
  margin-top: 100px;
  max-width: 500px; 
  flex: 1; /* You need this property */
}

display: flex berarti wadah memposisikan anaknya sesuai dengan model flexbox, tetapi Anda masih harus memberi tahu anak-anak untuk mengambil ruang yang tersedia dengan menyetel flex mereka ke 1 (atau nomor lainnya , dalam hal ini ruang akan didistribusikan ke seluruh anak secara proporsional dengan nilainya).

2
soimon 10 Januari 2021, 16:18

Saya harap ini yang Anda harapkan.

Tambahkan perubahan ini di CSS Anda untuk mencapai hasil yang diharapkan:

.sections {
  display: flex;
  margin: 0px 5px;
  justify-content: space-around;
}

.section {
  margin-top: 100px;
  flex-grow:1;
  max-width: 500px;
}
* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background: #59537e;
}

#navbar {
  background: #382f6a;
  display: flex;
  justify-content: space-between;
  padding: 25px;
  position: sticky;
  top: 0;
  box-shadow: 0 10px 10px -2px rgba(0, 0, 0, 0.3);
  height: 70px;
}

nav ul li {
  display: inline-block;
  font-size: 16px;
  margin-left: 20px;
  color: #d2cbf5;
  font-weight: bold;
  margin-top: 7px;
  cursor: pointer;
}

nav ul li:hover {
  color: white;
}

#links {
  display: flex;
}

#links img {
  margin-right: 13px;
}

.container {
  height: 1000px;
  margin: auto;
  max-width: 1150px;
}

.row {
  margin: 40px 20px 25px 20px;
  display: flex;
  justify-content: center;
}

.row a {
  text-decoration: none;
  color: white;
  font-size: 20px;
}

.btn {
  margin: 0px 20px;
  border: 2px white solid;
  padding: 7px 25px;
  border-radius: 20px;
  font-weight: bold;
}

.btn:hover {
  background: white;
  color: #59537e;
  border-color: blanchedalmond;
}

.sections {
  display: flex;
  margin: 0px 5px;
  justify-content: space-around;
}

.section {
  margin-top: 100px;
  flex-grow:1;
  max-width: 500px;
}

.block {
  background: white;
  border-radius: 10px;
  height: 300px;
  margin-top: 25px;
  display: block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>itslearning</title>
</head>

<body>
  <nav id="navbar">
    <div id="links">
      <img src="IMGS/logo-badge.svg" width="32px" height="32px">
      <ul>
        <li>Home</li>
        <li>Courses</li>
        <li>Groups</li>
        <li>Calender</li>
        <li>Support</li>
        <li>BAU</li>
        <li>BAUGO</li>
        <li>BAU Library</li>
      </ul>
    </div>
    <div id="profile">
      <ul>
        <li>Noti</li>
        <li>Msgs</li>
        <li>Khaled</li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <a href="" class="btn">Courses</a>
      <a href="" class="btn">Updates</a>
    </div>
    <div class="sections">
      <div class="section">
        <div class="block">

        </div>
        <div class="block">

        </div>
      </div>
      <div class="section">
        <div class="block">

        </div>
        <div class="block">

        </div>
      </div>
    </div>
  </div>
</body>

</html>
1
Amaresh S M 10 Januari 2021, 17:13