堆棧內存溢出
  簡體   English   中英

div中心數字

[英]Centre figures within div

 原文  2013-03-31 21:19:15  8   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