cara membuat 3 kolom ditengah horizontal

mas ini caranya biar artikel 1 artikel 2 artikel 3 biar jadi rata tengah tanpa pake margin gimana ya? saya coba buat parent baru terus pake text align center tetep gabisa bisanya ditambahin margin di artikel 1 nya

avatar areydra
@areydra

29 Kontribusi 3 Poin

Diperbarui 6 tahun yang lalu

10 Jawaban:

Jawaban Terpilih

Intinya tuh kalo artikel-nya ganjil, tetep akan ditengah kan? CMIIW. Ini solusinya:

1. Kalo mau jangan pake float, mainin display aja jadi "inline-block". 2. Terus, tiap child, kasih margin "-4".

Nih ane buat contoh disini: https://jsfiddle.net/8bw7f8vu/

Semoga solve ya.

avatar nurimansyah
@nurimansyah

98 Kontribusi 87 Poin

Dipost 6 tahun yang lalu

ane taunya pake css framework bootstrap gan :v ada grid sistemnya col, jadi tinggal diginiin :


<div class="row">
 <div class="col col-md-4">
  // isi konten ente
 </div>
 <div class="col col-md-4">
  // isi konten ente
 </div>
 <div class="col col-md-4">
  // isi konten ente
 </div>
</div>

row itu untuk ngebuat grid nya jadi setiap maxnya 12 kolom nilainya, klo dibagi 3 jadi 4 jadi per konten dikasih class col-md-4 , kolom medium(karna di dekstop jadi medium, klo mobile xs) 4 , per row

avatar nanto88
@nanto88

122 Kontribusi 56 Poin

Dipost 6 tahun yang lalu

Kalo pake Grid System kaya yang dari bootstrap, kalo misalnya dengan format 3 kolom, tapi datanya ada yang ganjil misalnya 2/4/6/dst.. Maka kolom pada baris terakhir pasti ga bisa di tengah, tapi jadi rata kiri semua kolomnya.

avatar nurimansyah
@nurimansyah

98 Kontribusi 87 Poin

Dipost 6 tahun yang lalu

makasih ya mas @nurimansyah iya maksud saya kaya gitu ada tutorial di google kurang srek saya kaya kurang pas gitu. sama saya mau nanya lagi boleh? kalo biar dijadiin gambar ke satu jadi kaya gambar kedua gimana ya? kan yg dikasih mas hilman itu kalo pake framework materalize nah saya mau buat sendiri tapi jadinya malah kaya gambar pertama[img]https://scontent.fcgk7-1.fna.fbcdn.net/v/t1.0-9/19113558_782033125292828_8946593701028736143_n.jpg?_nc_eui2=v1%3AAeEQyKd00sVMxRIrVsb6l-I4f6-_nHVCzTQrMwU2VEmXb17F0lXpVthvfXSGTmX3T0hDwyjiEfAd-Aspp0W78rFZf3kArfs1b3I5AyFyR4PcW48NY4Z9wlrX3S3AWxcxs-Y&oh=08322ce99cdae2e0222ae73fe39f92f3&oe=59DFDE2A[/img]

avatar areydra
@areydra

29 Kontribusi 3 Poin

Dipost 6 tahun yang lalu

mas @nanto88 saya kurang mau kalo pake framework mas saya mau belajar biar bisa bikinnya juga

avatar areydra
@areydra

29 Kontribusi 3 Poin

Dipost 6 tahun yang lalu

@areydra sama-sama mas, senang bisa membantu... Btw, saya agak kurang paham untuk pertanyaan terakhir, "Dijadiin gambar kesatu jadi kaya gambar kedua"? Kurang mudeng, hehe, mungkin bisa di perjelas lagi?

avatar nurimansyah
@nurimansyah

98 Kontribusi 87 Poin

Dipost 6 tahun yang lalu

@nurimansyah jadi gini mas kan yg gambar pertama itu yg saya lingkari merah nah saya mau buat desain kaya gambar yg dibawahnya yg ada avatarnya itu. diatas gambar text editnya mas.. ohiya mas saya mau nanya lagi ni boleh? jadi kan saya nambahin gambar background eh gambarnya bukan jadi background malah gimana ya lebih jelas nya kesini ya mas https://sekolahkoding.com/forum/gambar-background-yg-malah-mempengaruhi-elemen-lain saya bingung :' . sebelumnya maaf ngerepotin ya mas

avatar areydra
@areydra

29 Kontribusi 3 Poin

Dipost 6 tahun yang lalu

Untuk pertanyaan pertama, bisa di coba teknik ini:

Script HTML:

<div class="komentar">
  <div class="komentar__item">
    <div class="komentar__gambar">
      <img src="https://api.adorable.io/avatars/100/sekolahkoding1@adorable.io.png" alt="Gambar Avatar">
    </div>
    <div class="komentar__konten">
      <h3 class="komentar__nama">Nama Anda</h3>
      <p class="komentar__paragraph">Have no fear, they're still there! We updated our demo to showcase our generated avatars, but the original avatars are still in the same place.</p>
    </div>
  </div>
  <div class="komentar__item">
    <div class="komentar__gambar">
      <img src="https://api.adorable.io/avatars/100/sekolahkoding2@adorable.io.png" alt="Gambar Avatar">
    </div>
    <div class="komentar__konten">
      <h3 class="komentar__nama">Nama Anda</h3>
      <p class="komentar__paragraph">Have no fear, they're still there! We updated our demo to showcase our generated avatars, but the original avatars are still in the same place.</p>
    </div>
  </div>
  <div class="komentar__item">
    <div class="komentar__gambar">
      <img src="https://api.adorable.io/avatars/100/sekolahkoding3@adorable.io.png" alt="Gambar Avatar">
    </div>
    <div class="komentar__konten">
      <h3 class="komentar__nama">Nama Anda</h3>
      <p class="komentar__paragraph">Have no fear, they're still there! We updated our demo to showcase our generated avatars, but the original avatars are still in the same place.</p>
    </div>
  </div>
</div>

Script CSS:

@import url('https://fonts.googleapis.com/css?family=Overpass');

body {
  font-family: 'Overpass', sans-serif;
}

p {
  font-size: calc(14/16 * 100%);
}

.komentar {}
.komentar__item {
  background-color: #34495E;
  margin-bottom: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.komentar__item::after {
  display: block;
  clear: both;
  content: '';
}
.komentar__gambar {
  float: left;
  width: 100px;
  height: 100px;
  padding-left: 20px;
}
.komentar__konten {
  float: left;
  padding-left: 20px;
  box-sizing: border-box;
  width: calc(100% - 120px);
}
.komentar__nama {
  margin: auto auto 20px;
  color: white;
}
.komentar__paragraph {
  color: white;
  margin-bottom: 0;
}

Untuk demo silahkan kunjungi: https://jsfiddle.net/hjfko5nf/

Dan, buat pertanyaan kedua, kayanya udah ada yang bantu jawab di forum-nya :)

Silahkan bertanya kembali ya dan semoga bermanfaat.

avatar nurimansyah
@nurimansyah

98 Kontribusi 87 Poin

Dipost 6 tahun yang lalu

@nurimansyah makasih masss :D aduhh jadi ngerepotin saya sekali lagi makasih ya mass :) iya pas pertamanya belum ada yg jawab makanya saya nanya ke mas hehe maap ngerepotin :D

avatar areydra
@areydra

29 Kontribusi 3 Poin

Dipost 6 tahun yang lalu

@areydra iya sama-sama, senang bisa membantu... :)

avatar nurimansyah
@nurimansyah

98 Kontribusi 87 Poin

Dipost 6 tahun yang lalu

Login untuk ikut Jawaban