Pertanyaan Centang sejajarkan penampung dan sisihkan elemen turunan


Saya punya X jumlah gambar (semua tinggi dan lebar yang sama), dan saya ingin menampilkannya di halaman web. Tapi saya ingin membuat halaman secara otomatis menampilkan jumlah gambar maksimum pada satu baris (tanpa mengubah ukuran gambar) ketika browser diubah ukurannya, dan untuk menampilkan gambar jarak yang tetap terpisah.

Juga gambar harus dikelompokkan bersama di tengah halaman, dan ditampilkan satu demi satu.

misalnya Ketika jendela browser hanya cukup lebar untuk menampilkan 3 gambar pada satu baris, mereka harus ditampilkan sebagai berikut.

3 gambar per baris dikelompokkan bersama jarak tetap terpisah, di tengah halaman, satu demi satu. enter image description here

Dan jika browser dibuat lebih lebar sehingga 4 gambar dapat ditampilkan secara berturut-turut, mereka harus ditampilkan seperti itu.

4 gambar per baris (tanpa mengubah ukuran gambar), dikelompokkan bersama dengan jarak tetap terpisah, di tengah halaman, satu demi satu. enter image description here

Sejauh ini saya sudah menulis kode berikut:

HTML

<div class="outer-div">
    <div class="inner-div">
        <div class="image-div"><img src="images/1.png"></div>
        <div class="image-div"><img src="images/2.png"></div>
        <div class="image-div"><img src="images/3.png"></div>
        <div class="image-div"><img src="images/4.png"></div>
        <div class="image-div"><img src="images/5.png"></div>
    </div>
</div>

CSS

img {
    height: 200px;
    width: 200px;
    padding: 10px;
}

.image-div {
    display: inline;
}

.outer-div {
    text-align: center;
    width: 100%;
}

.inner-div {
    text-align: left;
    display: inline;
}

Jadi gambar ditampilkan sejajar dengan padding 10px di dalam div (inner-div) yang kemudian berpusat di dalam div-luar. Dan gambarnya disejajarkan dengan teks ke kiri di dalam div-dalam.

Tetapi masalahnya adalah mereka ditampilkan sebagai berikut:

enter image description here 

Dan seperti berikut ketika browser dibuat lebih lebar enter image description here

Dapatkah seseorang menunjukkan kepada saya bagaimana menampilkan gambar seperti kumpulan gambar pertama?

yaitu jumlah maksimum gambar per baris (tanpa mengubah ukuran gambar), satu demi satu, dikelompokkan bersama di tengah halaman, jarak tetap terpisah (terbungkus).


32
2017-10-17 23:37


asal


Jawaban:


Tidak ada cara mudah untuk mencapai tata letak dengan CSS biasa sejauh yang saya tahu. Pendekatan berikut menggunakan kueri media untuk mengatur lebar div dalam untuk ukuran viewport yang berbeda.

Pertimbangkan untuk menggunakan Javascript jika Anda memiliki sejumlah besar item, CSS preprocessor mungkin juga membantu.

Lihat cuplikan kode dan komentar sebaris, juga periksa contoh jsfiddle untuk pengujian mudah.

body {
    margin: 10px 0;
}
.outer {
    text-align: center;
}
.inner {
    font-size: 0; /* fix for inline gaps */
    display: inline-block;
    text-align: left;
}
.item {
    font-size: 16px; /* reset font size */
    display: inline-block;
    margin: 5px; /* gutter */
}
.item img {
    vertical-align: top;
}
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
    .inner {
        width: 440px; /* (100+5+5)x4 */
    }
}
@media (max-width: 441px) {
    .inner {
        width: 330px;
    }
}
@media (max-width: 331px) {
    .inner {
        width: 220px;
    }
}
@media (max-width: 221px) {
    .inner {
        width: 110px;
    }
}
<div class="outer">
    <div class="inner">
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
    </div>
</div>


11
2017-10-18 00:19



Jumlah maksimum gambar per baris (tanpa mengubah ukuran gambar), satu demi satu, dikelompokkan bersama di tengah halaman, jarak tetap terpisah (terbungkus).

Itu pertanyaan yang sangat bagus. Tampaknya sangat sederhana pada awalnya, tetapi hasil optimal sulit dicapai.

Saya tidak benar-benar percaya ada cara untuk mencapai perilaku yang diharapkan tanpa menggunakan kueri media.

Namun, memanfaatkan beberapa pertanyaan media dan mengetahui persis lebar gambar dan semaksimal mungkin jumlah gambar per baris kita bisa menyelesaikan masalah menggunakan display: inline-* sifat berdasarkan.


display: inline-block

Sebaiknya dukung browser lama, karena sudah ada sejak itu CSS2. Kita harus menggunakan sedikit trik untuk mencegah rendering ruang kosong yang tidak diinginkan di antara item.

Triknya adalah pengaturan properti CSS font-size: 0.


display: inline-flex

Solusi ini memanfaatkan CSS flexboxdan ini adalah pilihan yang baik untuk para perusuh modern.


display: inline-table

Didukung sejak CSS2 juga dan tidak ada trik yang dibutuhkan untuk membuatnya bekerja.


display: inline

Hasil akhir bukan yang diharapkan oleh penulis, karena elemen-elemen di baris kedua akan menjadi pusat dan tidak rata kiri. Bagian yang baik tentang solusi ini adalah bahwa ia akan bekerja tanpa pengetahuan sebelumnya tentang lebar gambar dan pertanyaan media.


.wrapper {
  text-align: center;
}
.inline {
  font-size: 0;
  display: inline;
}
.inline-block {
  display: inline-block;
  font-size: 0;
  text-align: left;
}
.inline-flex {
  display: inline-flex;
  flex-wrap: wrap;
}
.inline-table {
  display: inline-table;
  text-align: left;
}
.item {
  margin: 10px;
}
@media (max-width: 240px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 120px;
  }
}
@media (min-width: 241px) and (max-width: 360px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 240px;
  }
}
@media (min-width: 361px) and (max-width: 480px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 360px;
  }
}
@media (min-width: 481px) and (max-width: 600px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 480px;
  }
}
@media (min-width: 601px) and (max-width: 720px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 600px;
  }
}
@media (min-width: 721px) and (max-width: 840px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 720px;
  }
}
<h1>display: inline-block</h1>

<div class="wrapper">

  <div class="inline-block">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

  </div>

</div>

<h1>display: inline-flex</h1>

<div class="wrapper">

  <div class="inline-flex">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

  </div>

</div>

<h1>display: inline-table</h1>

<div class="wrapper">

  <div class="inline-table">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

  </div>

</div>

<h1>display: inline</h1>

<div class="wrapper">

  <div class="inline">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

  </div>

</div>


9
2017-10-23 03:56



Berikut ini solusi umum yang dapat berfungsi untuk Anda dan orang lain.

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

CSS

ul {
    margin: 0 auto;              /* center container */
    width: 1000px;
    padding-left: 0;             /* remove list padding */
    list-style-type: none;
    font-size: 0;                /* remove inline-block white space;
                                    see https://stackoverflow.com/a/32801275/3597276 */
}

li {
    display: inline-block;
    font-size: 60px;             /* restore font size removed in container */
    width: 150px;
    height: 150px;
    padding: 5px;
    margin: 15px 25px;
    box-sizing: border-box;
    text-align: center;
    line-height: 150px;
}

@media screen and (max-width: 430px) { ul { width: 200px; } }
@media screen and (min-width: 431px) and (max-width: 630px) { ul { width: 400px; } }
@media screen and (min-width: 631px) and (max-width: 830px) { ul { width: 600px;  } }
@media screen and (min-width: 831px) and (max-width: 1030px) { ul { width: 800px; } }

DEMO

Re: Flexbox: Meskipun flexbox adalah alat yang luar biasa, ini bukan solusi terbaik untuk masalah khusus ini. Saya menjelaskan alasan saya di sini: Cara memusatkan wadah lentur tetapi item flex kiri-align 


6
2017-10-27 00:58



Saya pikir, mengingat banyak kemungkinan CSS, bahwa ini adalah solusi yang cukup elegan dan multi-tujuan dengan kode minimal.

Cuplikan di bawah ini berisi semua CSS yang diperlukan, dan dilengkapi dengan komentar yang luas. Cara terbaik adalah menjalankan dalam mode 'halaman penuh'. Pertama, ubah ukuran browser Anda hingga 'rcb 1'punya 6 kolom. Kemudian mulailah menggulir dan mengubah ukuran untuk melihat berbagai efek.

Sepintas Anda mungkin tidak sadar, tetapi kode sederhana ini memiliki potensi yang sangat besar seperti galeri, filmstrip, scrollbox (baik vertikal maupun horizontal), dll.

Meskipun mungkin bukan solusi 100% untuk pertanyaan, saya cukup puas dengan hasilnya!

Silakan lihat baik-baik dan berikan komentar Anda!

-Tambahan-: solusi ini telah diuji untuk bekerja dengan:

  • Android 5+: peramban bawaan
  • Windows7-x32: Google Chrome (46+), Firefox (41+), Firefox DE (43+) dan IE11 +

PERBARUI 11/20/15 Beberapa modifikasi kode, lihat komentar.

/* A few initial globals I always use */
html, body           { box-sizing: border-box; height: 100%; width: 100%; 
                       margin: 0; padding: 0; border: 0; cursor: default }
*, *:before, *:after { box-sizing: inherit }
body                 { max-width: 100%; margin: 0 auto }


/*******************************/
/*     The important code      */
/*******************************/
.rcb { /* [MANDATORY] Main Responsive Component Box container */ 
    overflow-x: hidden; /* Content wraps vertically, no horizontal scollbar needed */
    overflow-y: auto;   /* Vertical scrollbar when needed */
    width: 100%;        /* Maximum width within parent element */
    height: auto;       /* Adjust height to child element needs */
    padding: 15px       /* Needed to get from under autohide IE scrollbar, check difference with FF/Ch */
}
.rcb-cmp-list { /* [MANDATORY] Component list, direct child of RCB, controls the flexbox behaviour */
    display: flex;      /* make element a flexible layout container */
    flex-wrap: wrap;    /* a row of N columns, wrapping within frame*/
}
.rcb-cmp-item { /* [RECOMMENDED] RCB component list item, default RCB influences flexbox behaviour of parent list */
    flex: 1 1;          /* add auto or 0, or add some min required width (fiddle away!) */
    min-width:  165px;  /* best value is a multiple or division of 330px for all types of devices */
    max-width:  100%;   /* don't make this too small, leave as is or make it a multiple of min-width */
    max-height: 100%;   /* ditto */
    min-height: auto;   /* override if you want to set minimum; interacts with flex-basis! */
    overflow: hidden;   /* Chop off outside content */
    margin: 8px         /* some space between the boxes */
}
.rcb-cmp-item img {
    display: block }    /*  -Add 11/20/15 - remove the gap below image elements 
                           (by default, IMG is an inline element and causes bottom space) */

.rcb-cmp-item-cnt > * { /* [OPTIONAL] RCB component list content container, fully occupies parent  */
    min-width: 100%;    /* min/max 100% makes sizes fixed to parent */    
    max-width: 100%
}

/* [OPTIONAL] Media Queries to keep box sizes within reasonable limits (corrected for 8px margin) */
@media all and (min-width:  721px)  { .rcb-cmp-item { max-width: calc(33% - 16px) } }
@media all and (min-width:  991px)  { .rcb-cmp-item { max-width: calc(25% - 16px) } }
@media all and (min-width: 1321px)  { .rcb-cmp-item { max-width: calc(20% - 16px) } }

/*******************************/
/* That's it, the rest is demo */
/*******************************/

/* which you can replace with your own */
body                    { font-family: Lato; background-color: rgba(96,125,139,1); /* bluegrey 500*/
                          color: rgba(255,255,255,.87); font-size: 1vmax; line-height: 1.3vmax; }
h3,        
.rcb-cmp-list h4        { text-align: center }

.rcb-cmp-item           { background-color: #ffc107;
                          color: rgba(0,0,0,.87)  /* amber 500 */;
                          padding: 4px; /* -update 11/20/15 - see add of ".rcb-cmp-item img" */
                          border-radius: 2px }
.rcb-cmp-item,
.rcb-cmp-item p img     { box-shadow: 0px 2px 2px  0px rgba(0, 0, 0, 0.14), 
                                      0px 3px 1px -2px rgba(0, 0, 0, 0.20),
                                      0px 1px 5px  0px rgba(0, 0, 0, 0.12) }

.rcb-cmp-item p img     { vertical-align: middle }
.rcb-cmp-item p         { font-weight: 400; letter-spacing: 0 }

.rcb-cmp-item iframe    { border: none }
<h3>rcb 1</h3>
    <div id="rcb-control-1" class="rcb">
        <div class="rcb-cmp-list">
            <h4 class="rcb-cmp-item">200x200 rectangles</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
    
            <h4 class="rcb-cmp-item">odd sized rectangles</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/500"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/500"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100"></div></div>
        </div>
    </div>

    <h3>rcb 2</h3>
    <div id="rcb-control-2" class="rcb">
        <div class="rcb-cmp-list">
            <h4 class="rcb-cmp-item">300x150 oblongs</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
    
            <h4 class="rcb-cmp-item">odd sized  oblongs</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100x50"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200x100"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400x200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/500x250"></div></div>
        </div>
    </div>
    
    <h3>rcb 3</h3>
    <div id="rcb-control-3" class="rcb">
        <div class="rcb-cmp-list">
            <h4 class="rcb-cmp-item">portrait 9:16</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
    
            <h4 class="rcb-cmp-item">landscape 16:9</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
    
            <h4 class="rcb-cmp-item">mixed 16:9 - 9:16</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
        </div>
    </div>
    
    <h3>rcb 4</h3>
    <div id="rcb-control-4" class="rcb">
        <div class="rcb-cmp-list">
            <h4 class="rcb-cmp-item">odd ones out</h4>
            <div class="rcb-cmp-item">empty rcb-cmp</div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt">empty rcb-cmp-item-cnt</div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><p>While I used a few oddly shaped images in this demo, on average most images will have ratio 3:2, 4:3 or 16:9</p></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100x200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><iframe src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=0"></iframe><h4>live media</h4></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200x300"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt">this is some text div with a <a href="javascript:void(0)">clickable anchor</a></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400x300"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><p>this is some paragraph with a <a href="javascript:void(0)">clickable anchor</a> and a tiny image <img src="http://dummyimage.com/35"> somewhere inside</p></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200x100"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400x100"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/257x133"></div></div>
        </div>
    </div>


1
2017-10-24 01:53



Anda tidak perlu melakukan pekerjaan yang rumit di sini, hanya penting!

.outer-div {
    text-align: center;
    width: 100%;
}

.inner-div {
    text-align: left !important;
    display: inline;
}

"! Penting" akan bekerja dalam situasi ini


0
2017-10-29 11:44



Saya tidak punya waktu untuk meningkatkan apa yang berikut, tetapi, harapan yang dapat membantu Anda dalam beberapa cara! Banyak kasus ditutup! Gunakan Flexbox jika Anda mencari solusi PureCSS!

.flex-container {
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.flex-item {
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
.flex-item:last-child { margin-right: auto }


/** IGNORE FOLLOWING **/
.flex-container {
  padding: 1em;
  border: 1px solid black;
  margin: 0 0 1em 0;
}
.box {
  width: 100px;
  height: 100px;
  visibility: visible;
  margin: 15px;
}

.size-lg { width: 90% }
.size-sm { width: 60% }
.size-xs { width: 40% }

.size-lg .box { background-color: yellow; }
.size-sm .box { background-color: yellow; }
.size-xs .box { background-color: yellow; }
<div class="flex-container size-lg">
  
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  
</div>

<div class="flex-container size-sm">
  
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  
</div>

<div class="flex-container size-xs">
  
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  
</div>


0
2017-10-29 13:20



Saya pikir saya punya solusi.

Mengobati .inner sebagai blok-inline, dapat Anda gunakan text-align: center untuk menyimpan grup item di tengah div 100% lebar. Yang turun dengan baik.

.outer {
    width: 100%;
    text-align: center;
}

.inner {
    display: inline-block;
}

.item {
    display: inline-block;
    float: left;
    margin: 5px;
    width: 100px;
    height: 100px;
}

Get'fiddle dengan itu: http://jsfiddle.net/sLz2ok92/2/


-1
2017-10-28 19:27