Wie kann ich jede Div trennen?

-1

Ich möchte jedes Div trennen (Leerzeichen). Wenn ich etwas Spielraum gebe, bewegt sich ein div zur nächsten Zeile. Wie kann ich 3 Boxen mit Platz in der gleichen Zeile halten? Was muss ich in CSS schreiben?Wie kann ich jede Div trennen?

Ich habe Grund html structre:

<div class="col-lg-4 col-md-6"> <section class="a"> A Title </section> <p>Lorem ipsum dolor sit amet,</p></div> 
<div class="col-lg-4 col-md-6"> <section class="b"> B Title </section> <p>Lorem ipsum dolor sit amet,</p></div> 
<div class="col-lg-4 col-md-12"> <section class="C"> C </section> <p>Lorem ipsum dolor sit amet,</p></div>

lg-4: 33,33%
md-6: 50%

Quelle

2017-10-17 newbie35

Teile der Code auch –

Vielleicht sollten Sie wechseln etwas flexibler als dieses Gitter und Versuch, Flexboxen? https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – sjahan

Versuchen Sie, Padding anzuwenden. – Sagar

Fo Leider müssen Sie dafür kein zusätzliches CSS schreiben. Der einfachste Weg ist, mit Bootstrap zu gehen, dies zeigt pen.

Nach der Bootstrap-Klasse, fügen Sie einfach einen Container für direkte Kinder Sie in col-lg-4 haben und verwenden Polsterung oder Marge, es wird immer innerhalb der col-lg-4

<div class="row"> 
    <div class="col-lg-4 col-md-4"> 
    <div class="section"> 
     <section class="a"> A Title </section> <p>Lorem ipsum dolor sit amet,</p> 
    </div> 
    </div> 
    <div class="col-lg-4 col-md-4"> 
    <div class="section"> 
     <section class="b"> B Title </section> <p>Lorem ipsum dolor sit amet,</p> 
    </div> 
    </div> 
    <div class="col-lg-4 col-md-4"> 
    <div class="section"> 
     <section class="C"> C </section> <p>Lorem ipsum dolor sit amet,</p> 
    </div> 
    </div> 
</div>

Quelle

2017-10-17 07:54:53

Sie reservierten Platz in der "col" hinzufügen müssen bis zu 12 sein könnte in einer „Reihe“ also, wenn Sie „col-lg-4“ verwenden ist nicht genug Platz, um Spielraum, müssen Sie „Rand“ zu div-Container und fügen Sie mehr divs intern, wie dies einzustellen:

<div class="col-lg-4" style="padding-left: 5px"> 
    <div calss="box col-lg-12"> 
     <!-- Data with padding --> 
    </div> 
</div>

Quelle

2017-10-17 07:53:41 Alex

sein, die ich nicht inline-block verwenden sollte. Ich muss diese Form:

Hier ist mein HMTL-Code:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Example - 1</title> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
    <h1> Our Menu </h1> 

<div class="col-lg-4 col-md-6"> <section class="a"> A title</section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div> 
<div class="col-lg-4 col-md-6"> <section class="b"> B Title </section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div> 
<div class="col-lg-4 col-md-12"> <section class="c"> C Title </section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div> 

</body> 
</html>

Hier ist meine CSS-Datei:

*{ 
    font-family: Comic Sans MS, cursive, sans-serif; 
    box-sizing: border-box; 

} 

h1 { 
    text-align: center; 
} 

div{ 

    background-color: gray; 
    float: left; 

} 
p{ 

    padding: 5px; 
    float: left;  

} 

section{ 
    width: 110px; 
    border: solid 1px black; 
    text-align: center; 
    font-weight: bold; 
    float: right; 

} 

.a{ 
    background-color:#D59898; 
} 

.b{ 
    background-color:#C14543; 
    color: white; 
} 

.c{ 
    background-color:#E5D198; 
} 

@media (min-width: 992px) { 
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { 
    float: left; 
    border: 2px solid black; 
    } 
    .col-lg-1 { 

    width: 8.33%; 
    } 
    .col-lg-2 { 
    width: 16.66%; 
    } 
    .col-lg-3 { 
    width: 25%; 
    } 
    .col-lg-4 { 
    width: 33.33%; 
    } 
    .col-lg-5 { 
    width: 41.66%; 
    } 
    .col-lg-6 { 
    width: 50%; 
    } 
    .col-lg-7 { 
    width: 58.33%; 
    } 
    .col-lg-8 { 
    width: 66.66%; 
    } 
    .col-lg-9 { 
    width: 74.99%; 
    } 
    .col-lg-10 { 
    width: 83.33%; 
    } 
    .col-lg-11 { 
    width: 91.66%; 
    } 
    .col-lg-12 { 
    width: 100%; 
    } 
} 
/********** Tablet devices only **********/ 
@media (min-width: 768px) and (max-width: 991px) { 
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { 
    float: left; 
    border: 2px solid black; 
    } 
    .col-md-1 { 
    width: 8.33%; 
    } 
    .col-md-2 { 
    width: 16.66%; 
    } 
    .col-md-3 { 
    width: 25%; 
    } 
    .col-md-4 { 
    width: 33.33%; 
    } 
    .col-md-5 { 
    width: 41.66%; 
    } 
    .col-md-6 { 
    width: 50%; 
    } 
    .col-md-7 { 
    width: 58.33%; 
    } 
    .col-md-8 { 
    width: 66.66%; 
    } 
    .col-md-9 { 
    width: 74.99%; 
    } 
    .col-md-10 { 
    width: 83.33%; 
    } 
    .col-md-11 { 
    width: 91.66%; 
    } 
    .col-md-12 { 
    width: 100%; 
    } 
}

Quelle

2017-10-17 07:57:14 newbie35

Wie kann ich jede Div trennen?

Antwort

Verwandte Themen