1. Zuhause
  2. Frage und Antwort
  3. Kachel Divs gleiche Höhe in der letzten Reihe von div

Kachel Divs gleiche Höhe in der letzten Reihe von div

2013-02-16 21 views
7

Hallo Jungs gibt es einen Weg, um das folgende Design erreicht? Ich mache ein Design von meinem div, aber ich weiß nicht, wie man es so bekommen kann.divs sind in der Mitte der Seite und die Breite des Wrappers von all diesen divs kann angepasst werden.Kachel Divs gleiche Höhe in der letzten Reihe von div

enter image description here

Normale Inhalt

enter image description here

Wenn der Wrapper wird kleiner dann ist es eine zweispaltige div sein und die letzten sind noch gleich. * Wrapper div einstellen seine Breite, wenn vergrößern und verkleinern ..

enter image description here

CODE

<html> 
<head> 
<title></title> 

<link rel="stylesheet" href="view/css/ui-layout.css" type="text/css"/> 
<link rel="stylesheet" href="view/css/layout.css" type="text/css"/> 
<script type="text/javascript" src="view/js/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="view/js/equalheight.js"></script> 

<style> 
html,body{ 
    padding: 0; 
    margin:0; 
    min-width: 820px; 
    color: #333333; 
    background-color: #F1F1f1; 
    font-family: Arial, Helvetica, Sans-Serif; 
    font-style: normal; 
    font-weight: normal; 
    font-size: 13px; 
} 
a{ 
    text-decoration:none; 
     color:#3EA7bb; 
     cursor: pointer; 
} 

ul{ 
    display: inline-block; 
    position: relative; 
} 

hr{ 
    border:1px solid #f1f1f1; 
} 
.cleared 
{ 
    display:block; 
    clear: both; 
    float: none; 
    margin: 0; 
    padding: 0; 
    border: none; 
    font-size: 0; 
    height:0; 
    overflow:hidden; 
} 
.reset-box 
{ 
    overflow:hidden; 
    display:table; 
} 

#main-container{ 
    width: 80%; 
    min-height: 100%; 
    min-width: 820px; 
    max-width: 1000px; 
    z-index: 0; 
    left: 0; 
    top: 0; 
    cursor:default; 
    overflow:hidden; 
    background-color:#FFFFFF; 
    position: relative; 
    margin: 0 auto; 
    padding-left: 20px; 
    padding-right: 20px; 
    -moz-box-shadow: 0 0 0 5px #333333; 
    -webkit-box-shadow: 0 0 0 5px #333333; 
    box-shadow: 0 0 5px #333333; 
} 

#header{ 

    height: 100px; 

    padding-top: 5px; 
    margin:0 auto; 
} 
#header-logo{ 
    width: 308px; 
    height: 100px; 
    background-image: url(../images/skerp.png); 
    background-position: center; 
    background-repeat: no-repeat; 
    margin-left: 20px; 
} 
#menu-bar{ 

    margin:0 auto; 
    min-height: 25px; 
    z-index: 100; 
    margin-top: 0; 
    margin-bottom: 0; 
    border-radius:0px; 
    /*-moz-box-shadow: 0 0 0 3px #333333; 
    -webkit-box-shadow: 0 0 0 3px #333333; 
    box-shadow: 0 0 3px #333333;*/ 
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
    margin:0 auto; 

} 
#menu-wraper{ 
    display: inline-block; 
    float: right; 
    margin-right: 10px; 

} 
.menu-element{ 
    min-width: 75px; 
    height: 25px; 
    display:inline-block; 
    cursor: pointer; 
    text-align:center; 
} 

#body-container{ 

    margin:0 auto; 
    padding-bottom: 90px; 
} 


.left-container,.right-container,.center-container{ 
    display: block; 
    float:left; 

} 
.featured{ 
margin:20px auto; 
padding:5px; 
-moz-box-shadow: 0 0 0 5px #333333; 
-webkit-box-shadow: 0 0 0 5px #333333; 
box-shadow: 0 0 5px #333333; 
border-radius: 5px; 
min-height: 300px; 
width: 780px; 
} 

.left 
{ 
    text-align: left; 
} 
.left span{ 
    float:left; 
    left:0; 
} 
.right 
{ 
    text-align: right; 
} 
.right span{ 
    right:0; 
    float:right; 
} 
.main-under-color{ 
    width: 300px; 
    height:5px; 
    display: block; 
} 
.sub-under-color{ 
    width: 100px; 
    height:5px; 
    display: block; 
} 
.content-wrapper{ 
    margin:10px auto; 
    min-width: 810px; 
    /*padding:10px;*/ 
} 

.content-wrapper h1{ 
    text-align: left; 
} 
.image-wrapper{ 
    margin: 0 auto; 

} 
.page-title{ 
    padding: 20px 10px 10px 10px; 
    display: block; 
} 
.page-title h1{ 
    font-weight: bold; 
    font-size: 40px; 
    text-indent: 20px; 
} 

.content-title h1{ 
    font-weight: bold; 
    font-size: 20px; 
} 
.content{ 
    padding:0px;/* 15px 15px 15px;*/ 
    display: block; 
    font-size: 15px; 
} 
.content p{ 
    text-align: justify; 
    line-height: 25px; 
    word-spacing: 1px; 
    word-wrap:break-word; 
} 
.border{ 
    -moz-box-shadow: 0 0 0 5px #999999; 
    -webkit-box-shadow: 0 0 0 5px #999999; 
    box-shadow: 0 0 5px #999999; 
    border-radius: 5px; 
    border:1px solid #999999; 
} 

.border-top{ 
    border-top:1px solid #999999; 
} 
.border-left{ 
    border-left:1px solid #999999; 
} 
.border-right{ 
    border-right: 1px solid #999999; 
} 
.border-bottom{ 
    border-bottom: 1px solid #999999; 
} 


    .column-wrapper{ 
     padding-top: 20px; 
     text-align: center; 
     vertical-align:middle; 
     width:100%;  

    } 

    .column-wrapper div{ 
     display: inline-table; 
     margin:2px; 


    } 
    .column-small{ 
     padding:10px; 
     padding-bottom:30px; 
     width:30%; 
     min-width: 250px; 
     position: relative; 
    } 

    .fixedbottomReadMore{ 
     position: absolute; 
     bottom: 10px; 
     right: 20px; 
    } 
    .fluedbottomReadMore{ 
     position: absolute; 
     float:right; 
     right:20px; 
    } 
    .column-small ul{ 
     margin-top: -10px; 
     width: 100%; 
     max-width: 240px; 
    } 
    .column-small ul li{ 
     text-align: left; 
    } 
    .column-small li{ 
     list-style: none; 
     padding: 5px; 
     text-indent: -30px; 
     word-wrap: break-word; 
    } 
    .column-medium{ 

    padding:10px; 
     width: 61%; 
     min-width: 505px; 
    } 
    .column-large{ 
    padding:10px; 
     width: 100%; 
     min-width: 760px; 
    } 



</style> 
</head> 
<body> 
<div id="main-container"> 


    <div id="body-container" > 

     <div class="content-wrapper "> 
      <div class="cleared"></div> 
       <div class="content "> 

        <div class="cleared"></div> 
        <div class="column-wrapper "> 
         <div class="column-large "> 

         </div> 
        </div> 
        <div class="cleared"></div> 
        <div class="column-wrapper"> 
         <div class="column-small border border-top"> 
          <h3>Features</h3> 
          <ul> 
           <li>Code blocking</li> 
           <li>Code Wrapping</li> 
           <li>Code Killing</li> 
           <li>Code Sleeping</li> 
          </ul> 
          <span class="fixedbottomReadMore"><a href="#">Read more</a></span> 

         </div> 

         <div class="column-small border border-top"> 
          <h3>Modules</h3> 
          <ul> 
           <li>Barking Around The house</li> 
           <li>Loving the Cats</li> 
           <li>Floating The points</li> 
           <li>Coding The Sleepers</li> 
           <li>Coding The Sleepers</li> 
          </ul> 
          <span class="fixedbottomReadMore"><a href="#">Read more</a></span> 
         </div> 

         <div class="column-small border border-top"> 
          <h3>Idont knows</h3> 
          <span class="fixedbottomReadMore"><a href="#">Read more</a></span> 

         </div> 

         <div class="column-small border border-top"> 
          <h3>Modules</h3> 
          <ul> 
           <li>Barking Around The house</li> 
           <li>Loving the Cats</li> 
           <li>Floating The points</li> 
           <li>Coding The Sleepers</li> 
           <li>Coding The Sleepers</li> 
          </ul> 
          <span class="fixedbottomReadMore"><a href="#">Read more</a></span> 

         </div> 
         <div class="column-small border border-top"> 
          <h3>Idont knows</h3> 
          <span class="fixedbottomReadMore"><a href="#">Read more</a></span> 

         </div> 

        </div> 
       </div> 
     </div> 
     <script> 
      $('.column-wrapper .column-small').equalHeightColumns(); 
     </script> 
    </div> 
    <div class="cleared reset-box"></div> 

    </div> 
</body> 
</html>

Quelle

2013-02-16 Snippet

+10

Ich bin nicht ganz sicher, was Sie meinen, aber von Ihrer Zeichnung scheint es, was Sie zu erreichen versuchen, ist ein "Mauerwerk-Layout" ähnlich wie bei Pintrest. Schauen Sie sich diesen Link an und sehen Sie, ob er hilft: http://designshack.net/articles/css/maurryonry/ – Jeff

+0

Danke Jeff. das ist was ich versuche zu erreichen, aber ich möchte das letzte Div-Unterteil ausrichten. Keine leeren Räume. – Snippet

+0

Ich glaube, ich habe ein ähnliches Layout erstellt. Kannst du dein Markup posten? –

Antwort

1

Ich weiß nicht, ob das zu deinem Szenario passt, aber die Geige unten lenkt die Unterseite des DIV.

Die Sache, die ich unsicher bin, ist, wenn Sie es in zweispaltige Modell konvertieren, was alle Blöcke sichtbar sein werden, wenn Sie am Ende zwei Blöcke in der letzten Zeile anzeigen, dann wird die Unterseite nach unten ausgerichtet.

sehen, ob das hilft - http://jsfiddle.net/AUV7J/

Making the span als display: table-cell können wir vertikal um den Block im Inneren ausrichten auf den Boden

Update:

Wie Sie sagten, Sie don‘ t wollen Räume dazwischen. Sie müssen programmatisch

Siehe die aktualisierte Fiddle

Aktualisieren, um die Größe des letzten DIV für jede Spalte einstellen:

Für dynamische Spalten finden Sie this

Quelle

2013-02-16 08:40:18

+0

Danke. ein kleines Problem über Zoom und Zoom Out. – Snippet

+0

Sie können die Spalten dynamisch wie folgt rendern http://jsfiddle.net/AUV7J/7/, Ich war zu faul, um die Blöcke als Elemente zu machen, so hielt es als String, Sie können das optimieren, aber das Arbeiten ist so, wie Sie es wollten –

0

Sie die Höhe eines jeden letzten Inhalt Basis auf dem Fenster festlegen Browser, da Sie eine haben feste Anzahl von Inhalten horizontal, können Sie eine Berechnung vornehmen und machen es für den letzten Inhalt nützlich. Das ist meine beste Idee, die ich bis jetzt erreicht habe.

Quelle

2013-02-16 05:57:14 stryker

1

Ich würde eine Funktion zum Fenster Resize-Ereignis binden wie so ...

var $win = $(window), 
    maxHeight, 
    mode, 
    calcMaxHeight = function() { 
     var h = $(this).height(); 
     if (h > maxHeight) { 
      maxHeight = h; 
     } 
    }, 
    adjustDivHeights = function() { 
     var $col = $(this); 
     if ($col.height() < maxHeight) { 
      var $lastChild = $col.children().last(); 
      $lastChild.height(maxHeight - ($col.height() - $lastChild.height())); 
     } 
    }; 

$win.resize(function() { 
    if ($win.width() > 500) { 
     if (mode === 'large') return; 
     mode = 'large'; 
     maxHeight = 0; 
     $('#container').children().each(calcMaxHeight).each(adjustDivHeights); 
    } else { 
     if (mode === 'small') return; 
     mode = 'small'; 
     maxHeight = 0; 
     // other size logic 
    } 
});

Das Ereignis löst nur die Berechnungen, wenn/wenn Sie Modi wechseln, für Effizienz willen, natürlich.

Quelle

2013-02-16 06:50:47 jedmao

Verwandte Themen

 Verwandte Themen