Robię stronę internetową dla kogoś i na następny krok muszę wyrównać Divs obok siebie. Już próbowałem flex i nie działa dla mnie.

To jest mój html:

    <!-- starting charts1 -->
    <div id="wrapper" style="width:100%"> 
    <div id="columnchart"></div>
    <div id="columnchart2"></div>
    <div id="columnchart3"></div>
    <div id="piechart"></div>
    <div id="barchart"></div>
   </div>
   <!-- ending charts1 -->

Tutaj możesz zobaczyć, że próbowałem szerokości 100 i kiedy zmienię, że do 80% moje tło nie będzie śledzić, gdy przewijam dziwną rzecz.

Teraz dla części CSS:

/* BEGIN VOOR CHARTS */
#wrapper {
position: relative;
float: left;
}
#columnchart {
width: 515px;
position: relative;
margin: auto; 
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}
#columnchart2 {
position: relative;
width: 515px;
margin: auto; 
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}
#columnchart3 {
position: relative;
width: 515px;
margin: auto; 
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}
#piechart {
position: sticky;
width: 515px;
margin: auto; 
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}

#barchart {
position: sticky;
width: 515px;
margin: auto; 
  left:50%;
  right: 0;
  top: 0;
  bottom: 50%;
}
/* END VOOR CHARTS */

Są już wyśrodkowane, więc świetnie, że chciałem i pracuję. Więc teraz mam te Divs w centrum:

<div id="columnchart"></div>
<div id="columnchart2"></div>
<div id="columnchart3"></div>
<div id="piechart"></div>

Te Divs skupiają to świetnie. Ale teraz chcę także wyrzec się, ale obok powyższych divs:

<div id="barchart"></div>

Wiem, że jestem blisko, ale nie działa. Przeczytałem już inne pytania z tym samym tytułem, ale nie działał.

1
Deniz 17 luty 2017, 12:36

2 odpowiedzi

Najlepsza odpowiedź

Usuń to "w lewo: 50%;"

#barchart {
position: sticky;
width: 515px;
margin: auto; 
  left:50%;
  right: 0;
  top: 0;
  bottom: 50%;
}
0
grinmax 17 luty 2017, 09:41

Owiń zawartość w dwóch pojemnikach takich jak:

<div class="cont">
    <div id="columnchart"></div>
    <div id="columnchart2"></div>
    <div id="columnchart3"></div>
    <div id="piechart"></div>
</div>
<div class="cont">
    <div id="barchart"></div>
</div>

Następnie dodaj następujące CSS:

#wrapper {
    position: relative;
    float: left;
    text-align: center;   /* Use this to align center */
}
.cont {
   display: inline-block;
   vertical-align: top;
   width: 515px;
}

To powinno wyśrodkować dwie sekcje i umieścić je na drugim.

0
Miquel Canal 17 luty 2017, 09:46