HTML Inline-Block-Element zum Zentrum:Wie mit Rand

<div id="wrap"> 
    <div id="block1"></div> 
    <div id="block2"></div> 
</div>

CSS:

div#wrap{ 
    margin-top: 3em; 
    border: solid 1px black; 
    text-align: center; 
} 

div#wrap *{ 
    display: inline-block; 
    width: 12.5em; 
    margin-top: 1em; 
    height: 8em; 
} 

div#wrap *:not(:last-child){ 
    margin-right: 8em; 
} 

#block1{ 
    background: orange; 
} 

div#wrap #block2{ 
    background: magenta; 
}

Diese zwei Blöcke sollen in Responsive Design-Modus zentriert werden. Wenn der Bildschirm breit genug ist, um 2 Blöcke hintereinander zu haben, funktioniert der Code. Aber wenn ich den Bildschirm nach unten verengen, wird der obere Block nach links verschoben, weil der Marge:

fiddle

Ist es möglich, diese Abfragen ohne Medien zu beheben?

bearbeiten

Ich versuchte flex-box:

div#wrap{ 
    margin-top: 3em; 
    border: solid 1px black; 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: center; 
}

fiddle2

Quelle

2017-12-28 user4035

Sie müßten die 'margin-right' Eigenschaft von dem ersten verschachtelten Elemente zu entfernen. – UncaughtTypeError

@UncaughtTypeError Ja. Aber ich brauche den Rand, wenn der Bildschirm breit genug ist, um 2 Elemente hintereinander zu enthalten. Ist die Bildschirmabfrage der Medienabfrage die einzige Lösung? – user4035

Es ist wahrscheinlich die sicherste Option mit der aktuellen * Inline-Block * -Konfiguration. Sie können mehr Optionen zur Verfügung haben, wenn Sie bereit sind, Flex-Box-Lösungen zu erkunden. – UncaughtTypeError

Wenn Sie einen Container mit negativem Rand verwenden, müssen Sie den Rand für die Endpunkte der Zeilen an verschiedenen Haltepunkten nicht variieren, und Sie können einfach mit Inline-Block gehen. Ich setze die Schriftgröße im Container auf Null, so dass ich meine Breiten mit Prozenten berechnen kann, ohne mich um Leerzeichen kümmern zu müssen.

div#wrap { 
 
    margin-top: 3em; 
 
    border: solid 1px black; 
 
    padding: 20px; 
 
    text-align: center; 
 
} 
 

 
.block { 
 
    display: inline-block; 
 
    width: 12.5em; 
 
    margin: 20px; 
 
    height: 8em; 
 
    font-size: 16px; 
 
} 
 

 
.block-container { 
 
    margin: -20px; 
 
    font-size: 0; 
 
} 
 

 
#block1 { 
 
    background: orange; 
 
} 
 

 
#block2 { 
 
    background: magenta; 
 
}

<div id="wrap"> 
 
    <div class="block-container"> 
 
    <div class="block" id="block1"></div> 
 
    <div class="block" id="block2"></div> 
 
    </div> 
 
</div>

Quelle

2017-12-28 22:50:03 JasonB

@ user4035 also war es ok, Marge auf beiden Seiten dann zu verwenden? :) Übrigens verstehe ich nicht die Notwendigkeit von negativen Marge hier .. Sie können sie entfernen und Polsterung auch und es wird sich gleich verhalten, nicht? das Hauptproblem war die Zentrierung, die durch das Hinzufügen von Margin auf beiden Seiten behoben wurde. –

@TemaniAfif Trying – user4035

@TemaniAfif Der Neg-Rand ist eine Angewohnheit für mich und ich denke nicht, dass er hier gut ist, aber es gibt viele Grid-Layouts wie Bootstrap Erzielen Sie Raster mit voller Breite, ohne die Ränder am Ende der Zeilen beim Umbruch verwalten zu müssen. http://www.helloerik.com/the-sublle-magic-behind-why-the-bootstrap-3-grid-works – JasonB

Eine Lösung flex zu verwenden ist und justify-content:space-around und entfernen margin:

div#wrap { 
 
    margin-top: 3em; 
 
    border: solid 1px black; 
 
    justify-content:space-around; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
div#wrap * { 
 
    display: inline-block; 
 
    width: 12.5em; 
 
    margin-top: 1em; 
 
    height: 8em; 
 
} 
 

 
#block1 { 
 
    background: orange; 
 
} 
 

 
#block2 { 
 
    background: magenta; 
 
}

<div id="wrap"> 
 
    <div id="block1"></div> 
 
    <div id="block2"></div> 
 
</div>

Quelle

2017-12-28 22:41:58

Wie mit Rand

bearbeiten

Antwort

Verwandte Themen