1. घर
  2. सवाल और जवाब
  3. div

div

2013-02-16 47 views
7

की अंतिम पंक्ति पर टाइल divs बराबर ऊंचाई निम्न हैलो दोस्तों को निम्नलिखित डिज़ाइन प्राप्त करने के लिए एक रास्ता है? मैं अपने div का डिज़ाइन करता हूं लेकिन मुझे नहीं पता कि इसे कैसे प्राप्त किया जाए। Divs पृष्ठ के केंद्र में हैं और इन सभी divs के रैपर की चौड़ाई समायोजित की जा सकती है।div

enter image description here

सामान्य सामग्री

enter image description here

जब आवरण कम है तो यह एक दो कॉलम div हो जाएगा और पिछले हो जाता है अभी भी बराबर हैं। * आवरण div में इसकी चौड़ाई जब ज़ूम समायोजित और बाहर ज़ूम ..

enter image description here

कोड

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

स्रोत

2013-02-16 Snippet

+10

देख मैं बिल्कुल यकीन नहीं है क्या आपका मतलब है, लेकिन आपके ड्राइंग से ऐसा लगता है कि आप जो हासिल करने की कोशिश कर रहे हैं वह पिंट्रेस्ट के समान "चिनाई लेआउट" है। इस लिंक को देखें और देखें कि क्या यह मदद करता है: http://designshack.net/articles/css/masonry/ – Jeff

+0

धन्यवाद जेफ। यही वह है जिसे मैं प्राप्त करने की कोशिश कर रहा हूं, लेकिन मैं चाहता हूं कि आखिरी div नीचे भाग को संरेखित करना चाहिए। कोई रिक्त स्थान नहीं – Snippet

+0

मुझे लगता है कि मैंने एक समान लेआउट बनाया है, क्या आप अपना मार्कअप पोस्ट कर सकते हैं? –

उत्तर

1

मुझे नहीं पता कि यह आपके परिदृश्य को फिट करता है, हालांकि, नीचे की पहेली डीआईवी की बोतलों को फिसलती है।

जिस चीज़ के बारे में मुझे अनिश्चितता है, वह है जब आप इसे दो कॉलम मॉडल में परिवर्तित करते हैं, तो यदि आप अंतिम पंक्ति में दो ब्लॉक दिखाते हैं तो सभी ब्लॉक दिखाई देंगे, तो बोतलों को नीचे से गठबंधन किया जाएगा।

देखें अगर यह मदद करता है - http://jsfiddle.net/AUV7J/

बनाना spandisplay: table-cell के रूप में, हम खड़ी ब्लॉक इसके अंदर करने के लिए नीचे

अद्यतन संरेखित कर सकते हैं:

जैसा कि आपने कहा, आप डॉन ' टी के बीच की जगह चाहते हैं। आप प्रोग्राम के प्रत्येक स्तंभ

के लिए पिछले DIV के आकार को समायोजित करने के लिए देखें अद्यतन Fiddle

अद्यतन करना होगा:

गतिशील स्तंभों के लिए, this

स्रोत

2013-02-16 08:40:18

+0

धन्यवाद। ज़ूम इन करने और ज़ूम आउट करने के बारे में थोड़ा फिक्स .. – Snippet

+0

आप इस http://jsfiddle.net/AUV7J/7/ की तरह गतिशील रूप से कॉलम प्रस्तुत कर सकते हैं, मैं ब्लॉक को तत्वों के रूप में बनाने के लिए बहुत आलसी था, इसलिए इसे स्ट्रिंग के रूप में रखा गया था, आप इसे अनुकूलित कर सकते हैं, लेकिन काम करना उतना ही है जितना आप चाहते थे –

0

आप जब से तुम एक है ब्राउज़र की खिड़की पर हर अंतिम सामग्री आधार की ऊँचाई सेट कर सकते हैं क्षैतिज रूप से सामग्री की निश्चित संख्या, आप गणना कर सकते हैं और इसे अंतिम सामग्री के लिए आसान बना सकते हैं। यह मेरा सबसे अच्छा विचार है कि मैं अब तक मिलता हूं।

स्रोत

2013-02-16 05:57:14 stryker

1

मैं बहुत तरह विंडो आकार परिवर्तन घटना के लिए एक समारोह के लिए बाध्य होगा ...

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

घटना केवल गणना आग यदि/जब आप मोड, दक्षता खातिर, निश्चित रूप से स्विच करें।

स्रोत

2013-02-16 06:50:47 jedmao

 संबंधित मुद्दे

  • कोई संबंधित समस्या नहीं^_^