Mettre deux div côte à côte. CSS non pris en compte.
Bonjour,
J'ai le code HTML suivant:
Code:
1 2 3 4 5 6 7 8 9
| <header>
<div class="displTimer">
<span id="timer"></span>
</div>
<div>
<h1><?= getLocalText($language, 5); ?></h1>
<h1 style="margin-left:100px;"><?= getLocalText($language, 6); ?></h1>
</div>
</header> |
Avec le CSS correspondant:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| header
{
width:100%;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:start;
vertical-align:middle;
}
.displTimer
{
height:50px;
margin-left:5px;
margin-right:150px;
min-width:140px;
border:1px solid;
background-color:#ddd;
text-align:center;
color:maroon;
padding:5px;
vertical-align:middle;
} |
Ce qui me donne le rendu suivant:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>monTitre</title>
<meta name="keywords" content="mots, clefs" />
<meta name="description" content="du texte" />
<meta name="author" content="moi" />
<meta name="copyright" content="moi" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=DNAnsZRgUOrnxywBNFPIMcrHAlFibPGRMjl_rBjALb4vPQKbsiE2YRLubx1dtWWa" charset="UTF-8"></script><base href="http://monsite.local" />
<link rel="stylesheet" media="all" type="text/css" href="../css/structure.css" />
<link rel="stylesheet" media="all" type="text/css" href="../css/screen.css" />
<link rel="stylesheet" media="print" type="text/css" href="../css/print.css" />
</head>
<body>
<header>
<div class="displTimer">
<span id="timer"></span>
</div>
<div>
<h1>début du titre</h1>
<h1 style="margin-left:100px;">fin du titre</h1>
</div>
</header> |
Important: Il n'est pas fait référence à ma feuille de style dans la console, alors que la classe displayTimer qui figure immédiatement à la suite dans la même feuille de style apparaît.