float left right css

Question

Bonjour.

J'ai observé le code source d'une page tutoriel de notre "comment ça marche?" et je voudrais réaliser la disposition left/right avec l'attribut "float".Voilà la photo dont j'ai inspiréé.
(Regardez la section "Dans la meme catégorie".Vous allez voir plusieurs sous-titres sont disposées chacune left/right.)

J'ai analysé la feuille de style référé par la page(Le nom de fichier est "css.php".)
https://www.commentcamarche.net/applis-sites/services-en-ligne/26185-creer-un-site-web-toutes-les-solutions/
,et j'ai imité le style.

Voilà mes codes source


 #floatLeft
{
 display:none;
 width:100px;
 background:#EFF2FB;
 text-align:left;
 position:relative;
 float:left;
 display:block;
}

 #floatRight
{
 display:none;
 width:100px;
 background:#EFF2FB;
 text-align:right;
 position:relative;
 float:right;
 display:block;
}

(1.css)


<html>
 <head>
  <link rel="stylesheet" type="text/css" src="1.css" />
 </head>
 <body>
  <div id="floatLeft">
   <ul>
    <li>i</li>
    <li>j</li>
    <li>k</li>
   </ul>
  </div>

  <div id="floatRight">
   <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
   </ul>
  </div>
 </body>
</html>

(1.html)

Mais contrairement à mon attente,chaque mot n'est disposé que verticalement.
Comment j'arrive à aligner correctement chaque mot?

Afficher la suite

i
j
k

a
b
c

(1.html) Mais contrairement à mon attente,chaque mot n'est disposé que verticalement. Comment j'arrive à aligner correctement chaque mot?

sofos01 · Answer

Voire Ce code CSS

#floatLeft
{
 width:50%;
 background:#EFF2FB;
 text-align:left;
 float:left;
}

#floatRight
{
 width:50%;
 background:#EFF2FB;
 text-align:left;
 float:left;
}

Float left right css

1 réponse

Votre réponse

Discussions similaires

Newsletters