Wie man 1 div center align und andere float rechts mit CSS machen

Ich möchte meine div2 in der Mitte ausrichten und div3 rechts zu sein.Wie man 1 div center align und andere float rechts mit CSS machen

Ich habe versucht, dass mit Text align tun: Zentrum für Haupt div und macht Schwimmer Recht auf div3 aber es ist es Zentrum align machen von Haupt div verbleibenden Teil berücksichtigen. Ich habe Anzeige gegeben: inline-flex zur Haupt div

<div style="height: 40px;width:120px;background-color: yellow;align-items: center;"> 
 

 
<div style="height: 20px;width:20px;background-color: red;"> 
 
    Hello 
 
</div> 
 

 
<div style="height: 20px;float: right;width:20px;background-color: red;"> 
 
</div> 
 
</div>

Quelle

2017-04-18 shahista inamdar

Wir brauchen Code. Bitte zeigen Sie uns, was Sie bisher versucht haben. –

Stellen Sie Breite von div ein, wenn Sie im div Zentrum –

benötigen, besuchen Sie unter Code ich antworte gestern. [Http://stackoverflow.com/questions/43450161/how-can-i-add-3-columns-in-an-html- page-using-css/43450339 # 43450339] –

style="margin: auto;" zu Ihrem div2 Element hinzufügen. Und style="margin-left: auto;" zu Ihrem div3-Element.

<div style="height: 40px;width:120px;background-color: yellow;align-items: center;"> 
 

 
<div style="margin:auto; height: 20px;width:20px;background-color: red;"> 
 
    Hello 
 
</div> 
 

 
<div style="margin-left:auto; height: 20px;float: right;width:20px;background-color: red;"> 
 
</div> 
 
</div>

Quelle

2017-04-18 05:41:02

Es funktioniert, aber es gibt mir das Ergebnis wie im zweiten Bild, das ich angehängt habe. Ich möchte div 2 Breite des Hauptdiv betrachten und in der Mitte ausrichten. Jetzt betrachten wir nur width = main div - div3 und werden dann mit der Mitte ausgerichtet, was nicht erwartet wird. –

Ich habe die Antwort bearbeitet und ein Code-Snippet hinzugefügt. Demnach, was sind die Änderungen, die Sie brauchen? –

.main { 
 
    display: block; 
 
    position: relative; 
 
    width:100%; 
 
    text-align: center; 
 
    border: 1px solid red; 
 
} 
 
.main .div1 { 
 
    display: inline-block; 
 
    border: 1px solid; 
 
} 
 
.main .div2 { 
 
    float: right; 
 
    border: 1px solid; 
 
    display: inline-block; 
 
}

<div class="main"> 
 
    <div class="div1"> 
 
    div1 
 
    </div> 
 
    <div class="div2"> 
 
    div2 
 
    </div> 
 
</div>

Quelle

2017-04-18 05:45:34 GvM

Divs sind Block-Level-Elemente, so dass Sie eine Marge von Auto auf der linken und rechten es in der Mitte platzieren können.

.center { 
    margin: 0 auto; 
} 

.right { 
    float: right; 
}

Im HTML müssen Sie die Reihenfolge der divs anpassen. Setzen div 3 vor div 2, so dass, wenn Sie es schweben, sie auf der gleichen Zeile erscheinen:

<div class="outer"> 
    <div class="right"></div> 
    <div class="center"></div> 
</div>

https://jsfiddle.net/dcqpw12u/1/

Quelle

2017-04-18 05:46:30 jonnow

Sie position:relative für die Haupt verwenden können, und position:absolute zum anderen div, und es auch zentriert es vertikal

.main { 
 
    text-align: center; 
 
    background-color: red; 
 
    height: 50px; 
 
    position: relative; 
 
} 
 

 
.div2 { 
 
    background-color: blue; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.div3 { 
 
    background-color: green; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 50%; 
 
    transform: translate(0, -50%); 
 
}

<div class="main"> 
 
    <div class="div2">SOME DIV 2</div> 
 
    <div class="div3">SOME DIV 3</div> 
 
</div>

Quelle

2017-04-18 05:49:33 Swellar

Es hat für mich funktioniert. Danke –

Bitte versuchen Sie es mit diesem Code:

<div style="height: 40px;width:120px;background-color: yellow;align-items: center; position:relative;"> 

<div style="height: 20px;width:40px;background-color: red; overflow:auto; margin:0 auto"> 
    Hello 
</div> 

<div style="height: 20px;position:absolute; right:0px; top:0px; width:20px;background-color: red;"> 
</div> 
</div>

Quelle

2017-04-18 05:56:23

Hier klicken [https://jsfiddle.net/gfeo88fe/] –

.contentmain{ 
 
    background: white none repeat scroll 0 0; 
 
     color: black; 
 
     height: auto; 
 
     width: 35%; 
 
     float: left; 
 
     background:red; 
 
    } 
 
    .contentCenter{ 
 
    background: white none repeat scroll 0 0; 
 
     color: black; 
 
     height: auto; 
 
     width: 30%; 
 
     float: left; 
 
     background:yellow; 
 
    } 
 
    .contentRight{ 
 
    background: white none repeat scroll 0 0; 
 
     color: black; 
 
     height: auto; 
 
     width: 35%; 
 
     float: right; 
 
     background:red; 
 
    }

<div class="contentmain"> 
 
\t \t Main<br/> 
 
\t \t Content<br/> 
 
\t </div> 
 
\t <div class="contentCenter"> 
 
\t \t Center<br/> 
 
\t \t Content<br/> 
 
\t </div> 
 
\t <div class="contentRight"> 
 
\t \t Right<br/> 
 
\t \t Content<br/> 
 
\t </div>

Dies könnte Ihre Anforderung sein erfüllen.

Quelle

2017-04-18 06:08:26

<!DOCTYPE html> 
<head> 
<style> 
.div0 { 
    text-align: center; 
    border-style: solid; 
    border-width: 5px; 
    height: 50px; 
    border-color: red; 
    position: relative ; 
} 
.div1 { 
    border-style: solid; 
    border-width: 4px; 
    right: 0%; 
    height: 40px; 
    width:40px; 
    border-color: green; 
    position: absolute; 
} 

.div2 { 
    left: 50%; 
    right:50%; 
    width:40px; 
    position: absolute; 
    border-style: solid; 
    height: 40px; 
    border-width: 4px; 
    border-color: green; 
    } 
</style>    
</head> 
<body> 
<div class="div0"> 
    <div class="div1"><p>div1</p></div> 
    <div class="div2"><p>div2</p></div> 
</div> 

</body> 
</html>

im Grunde kann man dies erreichen, indem mit der Position Eigenschaft und die rechts und links Eigenschaften von CSS, die Sie mehr auf Position und right Eigentum links Eigenschaft beziehen könnte auf die gefunden werden Seite? ˅.

, was ich in meiner Antwort getan gesetzt wird, um die Haupt div als Position relativ und den anderen Unter divs (div2 und div3) als absoulute

Um ein div auf der rechten Seite die meisten Ecke Sie zu bekommen setze die richtige Eigenschaft auf 0%
und um ein div zu zentrieren benutzte ich 50% sowohl auf der rechten als auch auf der linken Seite.

Quelle

2017-04-18 07:21:51 PhatMan

Wie man 1 div center align und andere float rechts mit CSS machen

Antwort

Verwandte Themen