लेआउट

मैं कुछ इस तरह बनाने के लिए कोशिश कर रहा हूँ:लेआउट

|--------------------------------------------------------|-------------| 
|              |    | 
|     DIV 1        |    | 
|              | DIV 3 | 
|--------------------------------------------------------|    | 
|     DIV 2        |    | 
|--------------------------------------------------------|-------------|

मैं इस के लिए एक मेज का उपयोग नहीं कर सकते हैं। और मुझे नहीं पता कि सिर्फ उन्हें इस तरह ढेर करने का कोई तरीका है या नहीं?

मैंने इसे नीचे दिए गए कोड के साथ कोशिश की, लेकिन डीआईवी 3 शीर्ष पर सभी तरह से नहीं है। यह वास्तव में शीर्ष से बिल्कुल div2.height कम है।

#DIV_1 { 
 
    height: 125px; 
 
    width: 80%; 
 
    display: block; 
 
    float: left; 
 
} 
 
#DIV_2 { 
 
    width: 80%; 
 
    height: 15px; 
 
    display: block; 
 
} 
 
#DIV_3 { 
 
    display: block; 
 
    float: left; 
 
    height: 140px; 
 
    width: 20%; 
 
}

<div class="row" style="width: 1024px; height: 140px;"> 
 
    <div> 
 
    <div id="DIV_1"></div> 
 
    <div id="DIV_2"></div> 
 
    </div> 
 
    <div id="DIV_3"> 
 
    </div> 
 
</div>

स्रोत

2016-08-19 Micard

मैं सुझाव है कि आप उस के लिए बूटस्ट्रैप ग्रिड प्रणाली का उपयोग कर सकते हैं। – d3r1ck

इसे प्राप्त करने के कई अलग-अलग तरीके। आपको डिवीजन पर डिस्प्ले ब्लॉक घोषित करने की आवश्यकता नहीं है। जब तक आप कुछ लिख रहे हैं – Huangism

इसे आजमाएं। मैंने DIV_1 और DIV_2 से फ्लोट और चौड़ाई हटा दी और इसे पैरेंट पर रख दिया।

#DIV_0 { 
 
width: 80%; 
 
float: left; 
 
} 
 
#DIV_1 { 
 
height: 125px; 
 
} 
 

 
#DIV_2 { 
 
height: 15px; 
 
} 
 

 
#DIV_3 { 
 

 
float: left; 
 
height: 140px; 
 
width: 20%; 
 

 
}

<div class="row" style="width: 1024px; height: 140px;"> 
 

 
\t <div id="DIV_0">   
 
\t \t <div id="DIV_1">div1</div> 
 
\t \t <div id="DIV_2">div2</div> 
 
\t </div> 
 

 
\t <div id="DIV_3"> 
 
\t div3 
 
\t </div> 
 

 
</div>

स्रोत

2016-08-19 18:46:05

धन्यवाद! उसने काम किया! मैं देखता हूं कि यह अब कैसे काम करता है :) – Micard

आप ट्विटर की बूटस्ट्रैप के साथ ऐसा कर सकते हैं। बूटस्ट्रैप ऑनलाइन के लिए लिंक:

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

तो फिर तुम कि पूरा करने के लिए नीचे दिए गए कोड का उपयोग कर सकते हैं:

<div class="row"> 

    <div class="col-lg-8">   
     <div class="row"></div> 
     <div class="row"></div> 
    </div> 
    <div class="col-lg-4"></div> 

</div>

स्रोत

2016-08-19 18:39:00 d3r1ck

उत्तर के लिए धन्यवाद! मैं बूटस्ट्रैप का उपयोग कर रहा हूं लेकिन मेरे पास मेरी अन्य शैलियों का सेटअप है कि उस भाग पर दो एक साथ वास्तव में जीत गए ... – Micard

#DIV_1 साथ चल प्रयोग न करें। इसके बजाय का उपयोग #DIV_1 के माता-पिता के साथ करें।

स्रोत

2016-08-19 18:44:13

लेआउट सीएसएस flexbox के साथ अपेक्षाकृत सरल है:

.row { 
 
    display: flex;     /* establish flex container */ 
 
    height: 140px;     /* height from original code */ 
 
    width: 1024px;     /* width from original code */ 
 
} 
 

 
.row > div:first-child { 
 
    flex: 0 0 80%;     /* width from original code */ 
 
    display: flex; 
 
    flex-direction: column;  /* stack first div children vertically */ 
 
} 
 

 
.row > div:first-child > div { 
 
    flex: 1;      /* items in first div distribute space equally */ 
 
    border: 1px dashed black; 
 
} 
 

 
.row > div:last-child { 
 
    flex: 0 0 20%; 
 
    border: 1px dashed black; 
 
}

<div class="row"> 
 
    <div> 
 
     <div id="DIV_1">DIV #1</div> 
 
     <div id="DIV_2">DIV #2</div> 
 
    </div> 
 
    <div id="DIV_3">DIV #3</div> 
 
</div>

flexbox के लाभ:

न्यूनतम कोड; बहुत ही कुशल
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
यह, flexbox के साथ एक आधुनिक (CSS3) तकनीक है उत्तरदायी
है विकल्पों की एक विस्तृत श्रृंखला।

ब्राउज़र समर्थन:

flexbox सभी प्रमुख ब्राउज़रों, except IE < 10 द्वारा समर्थित है। सफारी 8 और आईई 10 जैसे कुछ हालिया ब्राउज़र संस्करणों को vendor prefixes की आवश्यकता है। उपसर्ग जोड़ने के लिए त्वरित तरीके से Autoprefixer का उपयोग करें। this answer में अधिक जानकारी।

स्रोत

2016-08-19 18:46:57

मैं अत्यधिक Bootstrap Grid का उपयोग करने की सलाह दूंगा।

कुछ इस तरह:

<div class="container"> 
    <div class="row"> 
    <div class="col-md-8"> 
     <div class="row">DIV 1</div> 
     <div class="row">DIV 2</div> 
    </div> 
    <div class="col-md-4>DIV 3</div> 
    </div> 
</div>

स्रोत

2016-08-19 18:48:08 nmg49

इस एक का प्रयास करें:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 

    <style> 
     #one img, #two img{width: 300px; 
         height: 300px;} 

     #three img{height: 600px; 
       width: 600px;} 

     div#onetwo, div#three{display: inline-block;} 

    </style> 

</head> 
<body> 

    <div id="onetwo"> 
     <div id="one"><img src="image1.jpg" alt=""></div> 
     <div id="two"><img src="image2.jpg" alt=""></div> 

    </div> 

    <div id="three"><img src="image3.png" alt=""></div> 
</body> 
</html>

या का उपयोग बूटस्ट्रैप

स्रोत

2016-08-19 18:55:49

उत्तर

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