0

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

4 回答 4

1

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

请参阅http://jsfiddle.net/kDCM6/中的小提琴，其中删除了所有内联样式，并为<figure>s 指定了宽度以生成三列布局。内部的图像也已给出max-height: 100%，以便它们与父级自动缩放<figure>。

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

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

$('#container').masonry({
  // set columnWidth a fraction of the container width
  columnWidth: function( containerWidth ) {
    return containerWidth / 3;
  }
});
于 2013-03-31T21:44:12.823 回答
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 -->
于 2013-03-31T21:52:05.277 回答
0

.grid只需为: I used指定一个宽度width: 820px，可以根据内容进行调整。小提琴：http: //jsfiddle.net/QcLLC/1/

于 2013-03-31T21:36:15.940 回答
0

我相信我已经使用 CSS3 列和固定宽度在您的section.main.

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

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

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

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;
}
于 2014-03-11T04:26:55.303 回答