堆栈内存溢出
  繁体   English   中英

div中心数字

[英]Centre figures within div

 原文  2013-03-31 21:19:15  5   4    css/ html

问题描述

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

解决方案1
 1  2013-03-31 21:44:12

我不确定我是否完全掌握了这种情况。 <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;
  }
});

解决方案2
 1 已采纳  2013-03-31 21:52:05

一个示例，说明如何更改绝对定位以进行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 -->

解决方案3
 0  2013-03-31 21:36:15

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

解决方案4
 0  2014-03-11 04:26:55

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

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

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

我在CodePen上创建了一个示例，但是我使用了“Prefix free”选项，所以你要么自己计算出供应商前缀，要么也免费使用Prefix

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 div内的div居中 Div中的CSS中心图像 将div居于div的前导和尾随div中 CSS将一堆图像放在div中 如何在div中水平居中对齐ul 将图像放置在div的中心位置 居中2选择控件在div中水平和垂直 在div中居中放置图标-Bootstrap 3和Font Awesome 使用css将div中的多个元素居中 CSS中心 <ul> 在div问题中标记
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM