div中心数字

Question

我试图将一些数字集中在一起。目前这个数字分为两列，我希望它们在三列之内。但是每当我试图增加宽度时，所有数字都会变得有趣，或者稍微向左移动。任何帮助将不胜感激。视力辅助如下：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

我不确定我是否完全掌握了这种情况。 <figure>标签的内联样式与它们的CSS规则相矛盾，因为没有任何意义浮动绝对定位的元素。

查看http://jsfiddle.net/kDCM6/处的小提琴，其中删除了所有内联样式，并为<figure>指定了宽度以生成三列布局。其中的图片也已max-height: 100%，因此它们会自动与其父<figure>进行缩放。

当然，这个小提琴确实具有原始设计的漂亮布局，但要实现这一点，您必须首先研究如何生成绝对左侧和顶部偏移并将其更改为三列布局

编辑：您似乎正在使用Masonry（http://masonry.desandro.com）。如果是这样，您可以在调用Masonry时指定columnWidth。看起来您可以自动将列宽指定为容器宽度的一小部分，如下所示：

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

Answer 2

如何更改绝对定位以制作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 3

只需指定.grid的宽度：我使用width: 820px，可以根据内容进行调整。小提琴：http://jsfiddle.net/QcLLC/1/

Answer 4

我相信我已经使用CSS3列和section.main上的固定宽度达到了预期的效果。

我故意避免绝对定位并将所有样式移到样式表中。我还重新安排了你的数字，以符合他们在小提琴上的视觉顺序。

我甚至没有看你提供的CSS。这有点令人困惑，我专注于为您提供干净的3列布局。

我在CodePen上创建了一个示例，但我使用了“Prefix free”选项，因此您必须自己计算供应商前缀或使用Prefix free

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

需要注意的一点是，我必须修复截面的宽度和图形的宽度，以防止它裁剪图像。

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;
}