Rand zwischen 3 gleich breiten divs (responsive)

Ich habe drei divs mit gleicher Breite und die dritte Div auf volle Breite unter einem Breakpoint (991px um genau zu sein) und alle divs aufeinander gestapelt, wenn Browser Breite darunter ist 767px, und jetzt möchte ich gleiche Margen (zwischen divs & an den Rändern) so lassen Sie mich bitte einen Ausweg wissen. Und das will ich ohne Frameworks, nur mit Hilfe von CSS.Rand zwischen 3 gleich breiten divs (responsive)

Hier ist der Code:

* { 
 
    box-sizing: border-box; 
 
} 
 
h1 { 
 
    margin: 25px; 
 
    text-align: center; 
 
} 
 
div[class|=col] { 
 
    position: relative; 
 
    margin-bottom: 10px; 
 
    border: 1px solid black; 
 
} 
 
html, 
 
body { 
 
    margin: 15px; 
 
} 
 
.title { 
 
    border-left: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    width: 25%; 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
    color: black; 
 
    text-align: center; 
 
} 
 
#Title1 { 
 
    background-color: orange; 
 
} 
 
#Title2 { 
 
    background-color: white; 
 
} 
 
#Title3 { 
 
    background-color: green; 
 
} 
 
p { 
 
    background-color: gray; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    padding-top: 25px; 
 
    font-family: Helvetica; 
 
    color: black; 
 
} 
 
.row { 
 
    width: 100%; 
 
}

<div class="row"> 
 
    <div class="col-lg-4 col-md-6 "> 
 
    <section id="Title1" class="title">Chicken</section> 
 
    <p>Some text</p> 
 
    </div> 
 

 
    <div class="col-lg-4 col-md-6"> 
 
    <section id="Title2" class="title">Beef</section> 
 

 
    <p>Some text</p> 
 
    </div> 
 

 
    <div class="col-lg-4 col-md-12"> 
 
    <section id="Title3" class="title">Sushi</section> 
 

 
    <p>Some text</p> 
 
    </div> 
 
</div>

Quelle

2016-10-02 Pavan Kumar

Können Sie ein wenig klarer darüber sein, was Sie möchten? Sie fragen nach einem gleichen Abstand zwischen jedem Element an allen Haltepunkten, nur wenn sie vertikal ausgerichtet sind, nur wenn sie horizontal ausgerichtet sind, usw.? Auch, wie viel Abstand wünschen Sie? – patrickhawley

Entschuldigung, wenn ich meine Anforderungen nicht korrekt angegeben habe. -Ich möchte den Abstand zwischen den Elementen an allen Haltepunkten gleich sein. -Jeder Platz für den Abstand ist für mich ganz in Ordnung, bis sie sich entsprechend der Breite des Browsers verhalten. –

Klassen In den 3 divs: div-1, div-2, div-3

@media only screen and (max-width:766px) { 
    .div-1.div-2.div-3 { 
     margin-bottom: 10px; 
    } 
}

wie diese können Sie Fügen Sie die Margen für eine bestimmte Auflösung gemäß Ihrer Anforderung hinzu.

Quelle

2016-10-03 06:26:00

Vielen Dank für Ihre Antwort. Im Gegensatz dazu funktioniert der Margin-Bottom gut, aber wenn ich versuche, einen Margin zwischen den Divs zu geben, die sie in die nächste Zeile umbrechen. Also lass mich bitte einen Ausweg wissen. –

Rand zwischen 3 gleich breiten divs (responsive)

Antwort

Verwandte Themen