Wie verursacht man, dass ein Container die gesamte Breite seiner Kinder annimmt?

Ich habe 2 divs, die Kinder eines Elternteil div sind, mit jedem von ihnen eine Breite in Prozent (wichtig: Ich brauche die Breite in Prozent sein). Aber der Trick ist hier, ich muss dieses ganze Ding auf die Mitte der Seite ausrichten, was unmöglich scheint, wenn man den Rand-Auto-Trick benutzt. Bitte helfen Sie!Wie verursacht man, dass ein Container die gesamte Breite seiner Kinder annimmt?

Hier ist der Code so weit:

<div class="container" style="display: inline-block; width: 100%;"> 
    <div style="margin: 0px auto;"> 
     <div class="child1" style="width: 40%; float: left; background: lightblue;">Testing Child 1</div> 
     <div class="child2" style="width: 30%; float: left; background: lightgreen">Testing Child 2</div> 
    </div> 
</div>

Quelle

2017-06-16 Syed Ameed

vielleicht statt margin: 0px auto, benutze display: flex; und rechtfertigen-Inhalt: Mitte; ? – Amy

Sie können minimale Breite verwenden –

Sie Schwimmer verwenden, die die Elemente aus dem regelmäßigen Dokumentenfluss stattfinden wird. Ich habe deine .container als Flexbox definiert und die Kinder per CSS zentriert.

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.child1 { 
 
    width: 40%; 
 
    background-color: lightblue; 
 
} 
 

 
.child2 { 
 
    width: 30%; 
 
    background-color: lightgreen; 
 
}

<div class="container"> 
 
    <div class="child1">Testing Child 1</div> 
 
    <div class="child2">Testing Child 2</div> 
 
</div>

Quelle

2017-06-16 11:41:46 Gerard

Funktioniert perfekt. Wo kann ich eine gute und gründliche Anleitung für die Display-Flex-Eigenschaft erhalten? Ich mag keine technische Referenz, aber eine, die sehr einfach zu verstehen ist. –

Werfen Sie einen Blick hier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Gerard

Können Sie wie folgt verwenden -

<div class="container" style="display: inline-block; width: 100%;text-align: center"> 
    <div style="margin: 0px auto;"> 
     <div class="child1" style="width: 40%; float: none; background: lightblue;display: inline-block;">Testing Child 1</div><!-- 
     --><div class="child2" style="width: 30%; float: none; background: lightgreen;display: inline-block;">Testing Child 2</div> 
    </div> 
</div>

Kann es für Sie arbeiten :)

Quelle

2017-06-16 11:43:22

-1

Sie könnten 15% Polsterung auf der rechten Seite hinzufügen und links von Ihrem Behälter auf folgende Weise:

.container { 
 
    display: inline-block; 
 
    width: 100%; 
 
    padding: 0 15%; 
 
    background: red; 
 
} 
 
.child1 { 
 
    float: left; 
 
    width: 40%; 
 
    background: lightblue; 
 
} 
 

 
.child2 { 
 
    float: left; 
 
    width: 30%; 
 
    background: lightblue; 
 
}

<div class="container"> 
 
    <div class="child1">Testing Child 1</div> 
 
    <div class="child2">Testing Child 2</div> 
 
</div>

Hoffnung, das hilft.

Quelle

2017-06-16 11:44:02

Irgendein besonderer Grund für den Downvote ?? es funktioniert, und es hatte vor der kleinen Bearbeitung gearbeitet. –

Vielleicht versuchen, diesen Ansatz:

#box { 
 
position: absolute; 
 
    transform: translate(-50%, -50%); 
 
    top: 50%; 
 
    left: 50%; 
 
    }

<div class="container" style="display: inline-block; width: 100%;text-align: center"> 
 
    <div id="box" style="margin: 0px auto; width: 100%;"> 
 
     <div class="child1" style="width: 40%; float: none; background: lightblue;display: inline-block;">Testing Child 1</div><!-- 
 
     --><div class="child2" style="width: 30%; float: none; background: lightgreen;display: inline-block;">Testing Child 2</div> 
 
    </div> 
 
</div>

Quelle

2017-06-16 11:44:18 GeorgeBT

Sie können es mit dem Flexbox:

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
}

<div class="container"> 
 
    <div class="child1" style="width: 40%; background: lightblue">Testing Child 1</div> 
 
    <div class="child2" style="width: 30%; background: lightgreen">Testing Child 2</div> 
 
</div>

Quelle

2017-06-16 11:44:31 VXp

Wie verursacht man, dass ein Container die gesamte Breite seiner Kinder annimmt?

Antwort

Verwandte Themen