css - div 内の中央の図

Question

私はいくつかの数字を中心にしようとしています。現時点で2桁ですが、3桁以内でお願いします。しかし、幅を広げようとするたびに、すべての図がおかしくなるか、わずかに左に移動します。どんな助けでも親切にいただければ幸いです。次の視覚資料: http://jsfiddle.net/QcLLC/

HTML:

        <section class="main">

            <div class="grid clearfix masonry" id="grid" style="position: relative; height: 1820px;">
                <figure style="position: absolute; top: 0px; left: 0px;" class="masonry-brick"><img src="http://tympanus.net/Development/StickyCaptionsConcept/images/4.jpg"><figcaption style="position: absolute; width: 100%;"><a href="http://drbl.in/fWMT">Fall 7 Times Stand Up 8</a> by Erika Mackley</figcaption></figure>
                <figure style="position: absolute; top: 0px; left: 416.34375px;" class="masonry-brick"><img src="http://tympanus.net/Development/StickyCaptionsConcept/images/7.jpg"><figcaption><a href="http://drbl.in/fLBG">Unashamed Optimism of Ambition</a> by Erika Mackley</figcaption></figure>
                <figure style="position: absolute; top: 260px; left: 416.34375px;" class="masonry-brick"><img src="http://tympanus.net/Development/StickyCaptionsConcept/images/1.jpg"><figcaption style="position: absolute; width: 100%;"><a href="http://drbl.in/fWMM">Stay Hungry. Stay Foolish.</a> by Erika Mackley</figcaption></figure>
                <figure style="position: absolute; top: 650px; left: 0px;" class="masonry-brick"><img src="http://tympanus.net/Development/StickyCaptionsConcept/images/3.jpg"><figcaption><a href="http://drbl.in/fWPV">Wild Hearts Cannot Be Tamed</a> by Erika Mackley</figcaption></figure>
                <figure style="position: absolute; top: 910px; left: 0px;" class="masonry-brick"><img src="http://tympanus.net/Development/StickyCaptionsConcept/images/5.jpg"><figcaption><a href="http://drbl.in/fGhI">2012 Detroit Tigers</a> by Erika Mackley</figcaption></figure>
                <figure style="position: absolute; top: 910px; left: 416.34375px;" class="masonry-brick"><img src="http://tympanus.net/Development/StickyCaptionsConcept/images/6.jpg"><figcaption><a href="http://drbl.in/fKCf">Bad Hair Day</a> by Erika Mackley</figcaption></figure>
                <figure style="position: absolute; top: 1170px; left: 0px;" class="masonry-brick"><img src="http://tympanus.net/Development/StickyCaptionsConcept/images/2.jpg"><figcaption><a href="http://drbl.in/fQdt">Work Hard. Stay Humble.</a> by Erika Mackley</figcaption></figure>
                <figure style="position: absolute; top: 1170px; left: 416.34375px;" class="masonry-brick"><img src="http://tympanus.net/Development/StickyCaptionsConcept/images/8.jpg"><figcaption><a href="http://drbl.in/fPEY">Everyone Deserves To Be Adored</a> by Erika Mackley</figcaption></figure>
                <figure style="position: absolute; top: 1430px; left: 0px;" class="masonry-brick"><img src="http://tympanus.net/Development/StickyCaptionsConcept/images/9.jpg"><figcaption><a href="http://drbl.in/fWwG">Sarah William's Quote</a> by Erika Mackley</figcaption></figure>
            </div>

        </section>

    </div><!-- /container -->

CSS:

            .grid {
                margin: 30px auto;
            }

            .grid figure {
                display: block;
                float: left;
                margin: 0 1% 10px 1%;
                cursor: pointer;
                overflow: hidden;
            }

            .grid figure img {
                display: block;
            }

            .grid figure figcaption {
                position: absolute;
                font-size: 16px;
                font-weight: 400;
                left: auto;
                width: 100%;
                height: 60px;
                bottom: -60px;
                padding: 20px;
                color: #ddd;
                background: #18bcbc;
                -webkit-font-smoothing: antialiased;
                -webkit-transition: bottom 0.2s ease;
                -moz-transition: bottom 0.2s ease-in-out;
                -ms-transition: bottom 0.2s ease-in-out;
                -o-transition: bottom 0.2s ease-in-out;
                transition: bottom 0.2s ease-in-out;
            }

            .grid figure figcaption a {
                color: #fff;
            }

            .grid figure figcaption a:hover {
                color: #ffd468;
            }

            .grid figure:hover figcaption {
                bottom: 0px;
            }





            html { height: 100%; }

            *,
            *:after,
            *:before {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                padding: 0;
                margin: 0;
            }

            .clearfix:before,
            .clearfix:after {
                content: " ";
                display: table;
            }

            .clearfix:after {
                clear: both;
            }

            .clearfix {
                *zoom: 1;
            }

            body {

                background: #ffe19a url(../images/noisebg.png);
                font-weight: 300;
                font-size: 14px;
                color: #333;
                overflow: scroll;
                overflow-x: hidden;
            }

            a {
                color: #555;
                text-decoration: none;
            }

            .container {
                width: 100%;
                position: relative;
            }

            .main,
            .container {
                width: 100%;
                max-width: 1275px;
                margin: 0 auto;
                position: relative;
                padding: 0 0 5px 0px
            }

Answer 1

絶対配置を変更して 3 グリッド レイアウトを作成する方法の例。http://jsfiddle.net/JDq6C/3/

<style>
  .grid {
                margin: 30px auto;
            }

            .grid figure {
                display: block;
                float: left;
                margin: 0 1% 10px 1%;
                cursor: pointer;
                overflow: hidden;
            }

            .grid figure img {
                display: block;
            }

            .grid figure figcaption {
                position: absolute;
                font-size: 16px;
                font-weight: 400;
                left: auto;
                width: 100%;
                height: 60px;
                bottom: -60px;
                padding: 20px;
                color: #ddd;
                background: #18bcbc;
                -webkit-font-smoothing: antialiased;
                -webkit-transition: bottom 0.2s ease;
                -moz-transition: bottom 0.2s ease-in-out;
                -ms-transition: bottom 0.2s ease-in-out;
                -o-transition: bottom 0.2s ease-in-out;
                transition: bottom 0.2s ease-in-out;
            }

            .grid figure figcaption a {
                color: #fff;
            }

            .grid figure figcaption a:hover {
                color: #ffd468;
            }

            .grid figure:hover figcaption {
                bottom: 0px;
            }





            html { height: 100%; }

            *,
            *:after,
            *:before {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                padding: 0;
                margin: 0;
            }

            .clearfix:before,
            .clearfix:after {
                content: " ";
                display: table;
            }

            .clearfix:after {
                clear: both;
            }

            .clearfix {
                *zoom: 1;
            }

            body {

                background: #ffe19a url(../images/noisebg.png);
                font-weight: 300;
                font-size: 14px;
                color: #333;
                overflow: scroll;
                overflow-x: hidden;
            }

            a {
                color: #555;
                text-decoration: none;
            }

            .container {
                width: 100%;
                position: relative;
            }

            .main,
            .container {
                width: 100%;
                max-width: 1275px;
                margin: 0 auto;
                position: relative;
                padding: 0 0 5px 0px
            }
</style>

<section class="main">

            <div class="grid clearfix masonry" id="grid" style="position: relative; height: 1820px;width: 1240px;">
                <figure style="position: absolute; top: 0px; left: 0px;" class="masonry-brick"><img src="http://tympanus.net/Development/StickyCaptionsConcept/images/4.jpg"><figcaption style="position: absolute; width: 100%;"><a href="http://drbl.in/fWMT">Fall 7 Times Stand Up 8</a> by Erika Mackley</figcaption></figure>
                <figure style="position: absolute; top: 0px; left: 416.34375px;" class="masonry-brick"><img src="http://tympanus.net/Development/StickyCaptionsConcept/images/7.jpg"><figcaption><a href="http://drbl.in/fLBG">Unashamed Optimism of Ambition</a> by Erika Mackley</figcaption></figure>
                <figure style="position: absolute; top: 0px; left: 831px;" class="masonry-brick"><img src="http://tympanus.net/Development/StickyCaptionsConcept/images/1.jpg"><figcaption style="position: absolute; width: 100%;"><a href="http://drbl.in/fWMM">Stay Hungry. Stay Foolish.</a> by Erika Mackley</figcaption></figure>
                <figure style="position: absolute; top: 266px; left: 413.34375px;" class="masonry-brick"><img src="http://tympanus.net/Development/StickyCaptionsConcept/images/3.jpg"><figcaption><a href="http://drbl.in/fWPV">Wild Hearts Cannot Be Tamed</a> by Erika Mackley</figcaption></figure>
                <figure style="position: absolute; top: 654px; left: 0px;" class="masonry-brick"><img src="http://tympanus.net/Development/StickyCaptionsConcept/images/5.jpg"><figcaption><a href="http://drbl.in/fGhI">2012 Detroit Tigers</a> by Erika Mackley</figcaption></figure>
                <figure style="position: absolute; top: 531px; left: 416.34375px;" class="masonry-brick"><img src="http://tympanus.net/Development/StickyCaptionsConcept/images/6.jpg"><figcaption><a href="http://drbl.in/fKCf">Bad Hair Day</a> by Erika Mackley</figcaption></figure>
                <figure style="position: absolute; top: 655px; left: 831px;" class="masonry-brick"><img src="http://tympanus.net/Development/StickyCaptionsConcept/images/2.jpg"><figcaption><a href="http://drbl.in/fQdt">Work Hard. Stay Humble.</a> by Erika Mackley</figcaption></figure>
                <figure style="position: absolute; top: 794px; left: 416.34375px;" class="masonry-brick"><img src="http://tympanus.net/Development/StickyCaptionsConcept/images/8.jpg"><figcaption><a href="http://drbl.in/fPEY">Everyone Deserves To Be Adored</a> by Erika Mackley</figcaption></figure>
                <figure style="position: absolute; top: 917px; left: 0px;" class="masonry-brick"><img src="http://tympanus.net/Development/StickyCaptionsConcept/images/9.jpg"><figcaption><a href="http://drbl.in/fWwG">Sarah William's Quote</a> by Erika Mackley</figcaption></figure>
            </div>

        </section>

    <!-- /container -->

Answer 2

状況を完全に把握しているわけではありません。タグのインライン スタイルは<figure>CSS ルールと矛盾します。絶対位置に配置された要素を左にフロートさせるのは意味がないからです。

http://jsfiddle.net/kDCM6/のフィドルを参照してください。ここでは、すべてのインライン スタイルが削除され<figure>、3 列のレイアウトを生成するために s に幅が与えられています。中の画像も指定されているmax-height: 100%ため、親に合わせて自動的にスケーリングされ<figure>ます。

確かに、このフィドルには元のデザインの優れたレイアウトがありますが、それを実現するには、最初にこれらの絶対左オフセットと上オフセットがどのように生成されたかを調べ、それを 3 列のレイアウトに変更する必要があります。

編集: Masonry ( http://masonry.desandro.com ) を使用しているようです。その場合、Masonry を呼び出すときに columnWidth を指定できます。次のように、列幅をコンテナーの幅の一部として自動的に指定できるようです。

$('#container').masonry({
  // set columnWidth a fraction of the container width
  columnWidth: function( containerWidth ) {
    return containerWidth / 3;
  }
});

Answer 3

CSS3 列と固定幅を使用して目的の効果を達成したと思いますsection.main。

意図的に絶対配置を避け、すべてのスタイルをスタイルシートに移動しました。また、フィドルで視覚的に表示されていた順序に合わせて、フィギュアを再配置しました。

あなたが提供したCSSを見さえしませんでした。少しわかりにくかったので、きれいな 3 列のレイアウトにすることに集中しました。

CodePen で例を作成しましたが、「プレフィックス フリー」オプションを使用したため、ベンダー プレフィックスを自分で計算するか、プレフィックスフリーを使用する必要があります。

http://codepen.io/Ghodmode/pen/vbFGt

注意すべきことの 1 つは、画像がトリミングされないように、セクションの幅と図の幅を修正する必要があったことです。

HTML

<section class="main">
  <div class="grid clearfix masonry" id="grid">
    <figure class="masonry-brick">
      <img src="http://tympanus.net/Development/StickyCaptionsConcept/images/4.jpg">
      <figcaption>
        <a href="http://drbl.in/fWMT">Fall 7 Times Stand Up 8</a> by Erika Mackley</figcaption>
    </figure>
    <figure class="masonry-brick">
      <img src="http://tympanus.net/Development/StickyCaptionsConcept/images/3.jpg">
      <figcaption>
        <a href="http://drbl.in/fWPV">Wild Hearts Cannot Be Tamed</a> by Erika Mackley
      </figcaption>
    </figure>
    <figure class="masonry-brick">
      <img src="http://tympanus.net/Development/StickyCaptionsConcept/images/5.jpg">
      <figcaption>
        <a href="http://drbl.in/fGhI">2012 Detroit Tigers</a> by Erika Mackley
      </figcaption>
    </figure>
    <figure class="masonry-brick">
      <img src="http://tympanus.net/Development/StickyCaptionsConcept/images/2.jpg">
      <figcaption>
        <a href="http://drbl.in/fQdt">Work Hard. Stay Humble.</a> by Erika Mackley
      </figcaption>
    </figure>
    <figure class="masonry-brick">
      <img src="http://tympanus.net/Development/StickyCaptionsConcept/images/9.jpg">
      <figcaption>
        <a href="http://drbl.in/fWwG">Sarah William's Quote</a> by Erika Mackley
      </figcaption>
    </figure>
    <figure class="masonry-brick">
      <img src="http://tympanus.net/Development/StickyCaptionsConcept/images/7.jpg">
      <figcaption>
        <a href="http://drbl.in/fLBG">Unashamed Optimism of Ambition</a> by Erika Mackley
      </figcaption>
    </figure>
    <figure class="masonry-brick">
      <img src="http://tympanus.net/Development/StickyCaptionsConcept/images/1.jpg">
      <figcaption>
        <a href="http://drbl.in/fWMM">Stay Hungry. Stay Foolish.</a> by Erika Mackley
      </figcaption>
    </figure>
    <figure class="masonry-brick">
      <img src="http://tympanus.net/Development/StickyCaptionsConcept/images/6.jpg">
      <figcaption>
        <a href="http://drbl.in/fKCf">Bad Hair Day</a> by Erika Mackley
      </figcaption>
    </figure>
    <figure class="masonry-brick">
      <img src="http://tympanus.net/Development/StickyCaptionsConcept/images/8.jpg">
      <figcaption>
        <a href="http://drbl.in/fPEY">Everyone Deserves To Be Adored</a> by Erika Mackley
      </figcaption>
    </figure>
  </div>
</section>

CSS

body {
  margin: 0;
}

figure {
  position: relative;
  margin: 1em;
  padding: 0;
}

figure img {
  width: 20em;
}

section.main {
  column-count: 3;
  padding: 1em;
  column-gap: 1em;
  width: 66em;
}
figure:nth-of-type(4n+1) {
  margin-top: 0;
}

figure:nth-of-type(0n+4) {
  column-break-inside: avoid;
}

Answer 4

の幅を指定するだけです.grid: I used width: 820px、コンテンツに応じて調整できます。フィドル: http://jsfiddle.net/QcLLC/1/