• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z wyrównaniem divów w jednej linii!

0 głosów
67 wizyt
pytanie zadane 7 czerwca 2016 w HTML i CSS przez Matiofficjal Początkujący (360 p.)

Otóż chodzi o to ze divy nie chcą się wyrównać!

Nie da się tak wyjaśnić więc pokaże!

 

Jest tak:

A chciał bym tak:

 

Podam też kody

 

HTML/PHP:

<div class="nav">
			 <div id="Witajuser">
			 <?php 
		 echo "<h1>Witaj ".$_SESSION['user'].'!<h1>'; 
		 ?>
		 </div>
		 <div id="jakiemail">
		 <?php 
		 echo "<h3>E-mail: ".$_SESSION['email']; 
		 ?>
		 </div>
		 <h3 id="wylogujesz"><a  href="logout.php">Wyloguj Się</a><h3> <div id="zegar"></div>
		</div>

CSS:

.nav
{
	color: Yellow;
	background-color: 	#1E90FF !important;
	margin: 0px;
	border: 0px;
	padding: 0px;
	text-align: center;
	width: 100%;
	font-family: AR CENA;
	display:table;
    margin-right: auto;
	margin-left: auto;
	
}
#zegar
{
	float:left;
	display:table;
    margin-right: auto;
	margin-left: auto;
	background-color: blue;
	display: inline-block;
}
#wylogujesz
{
	float:left;
	display:table;
    margin-right: auto;
	margin-left: auto;
	background-color: blue;
	display: inline-block;
}
#Witajuser
{
	float:left;
	display:table;
    margin-right: auto;
	margin-left: auto;
	background-color: blue;
	display: inline-block;
}
#jakiemail
{
	float:left;
	display:table;
    margin-right: auto;
	margin-left: auto;
	background-color: blue;
	display: inline-block;
}

 

No i jak to uzyskać? (obrazek nr.2)

1 odpowiedź

0 głosów
odpowiedź 7 czerwca 2016 przez xmentor Nałogowiec (32,560 p.)

Flexbox:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

Przez twój kod dostaje oczopląsu xd

Używając flexbox'u nie używaj opływania(float).

Display table/inline-block, margin-right/left usun - wszystko flexboxem;

    display:table;
    margin-right: auto;
    margin-left: auto;
    background-color: blue;
    display: inline-block;

Zgodnie z kaskadowością "display:inline-block" będzię 'używane'.

Podobne pytania

0 głosów
1 odpowiedź 60 wizyt
pytanie zadane 15 lutego w HTML i CSS przez remo82 Użytkownik (540 p.)
0 głosów
4 odpowiedzi 86 wizyt
pytanie zadane 18 lipca 2015 w HTML i CSS przez Exec Użytkownik (510 p.)
0 głosów
0 odpowiedzi 53 wizyt
pytanie zadane 16 maja 2016 w C i C++ przez Philip Obywatel (1,970 p.)
...