comment avoir deux en-têtes sur la même ligne en html

Je veux avoir deux titres h2 et h3 sur la même ligne horizontale sur la gauche et l'autre sur la droite. Ils ont des ressources humaines, en dessous d'eux et je veux qu'ils soient à la même distance à partir de cette HEURE.

J'ai essayé de les rendre à la fois en ligne et ont un flotteur droit et l'autre gauche. Le problème avec cela est avec h3 comme elle est plus petite que h2 verticalement il a été centrée sur la moitié de la h2 de la longueur.

h2 est un peu comme assis sur les rh et h3 plutôt regardé comme flottant dans les airs.

J'ai un peu envie de leur ressembler tous les deux assis sur le rh.

h2{
display:inline;
float:left;
}
h3{
display:inline;
float:right;
}

Je parlais visuellement décrivant la situation.

source d'informationauteur Aditya Sastry

  1. 19

    Vous devez envelopper les deux têtes dans un div tag, et pour que la balise div utiliser un style qui ne clear: both. e.g:

    <div style="clear: both">
    <h2 style="float: left">Heading 1</h2>
    <h3 style="float: right">Heading 2</h3>
</div>
<hr />

    Avoir le hr après la div balise de s'assurer qu'il est poussé sous les en-têtes.

    Ou quelque chose de très semblable. Espérons que cette aide.

  2. 3

    Vous devriez seulement besoin de faire:

    • De les rendre à la fois inline (ou inline-block)
    • Les mettre à float la gauche ou la droite

    Vous devriez être en mesure d'ajuster la heightpaddingou margin propriétés de la petite rubrique pour compenser son positionnement. Je recommande d'installer les deux en-têtes d'avoir le même height.

    Voir ce vivre jsFiddle pour un exemple.

    (code de la jsFiddle):

    CSS

    h2 {
  font-size: 50px;
}

h3 {
  font-size: 30px;
}

h2, h3 {
  width: 50%;
  height: 60px;
  margin: 0;
  padding: 0;
  display: inline;
}​

    HTML

    <h2>Big Heading</h2>
<h3>Small(er) Heading</h3>
<hr />​
  3. 3

    Le Css vertical-align propriété devraient vous aider ici:

    vertical-align: bottom;

    est ce que vous avez besoin pour vos petits en-tête 🙂

    Vertical-Align

  4. 2

    Vérifier mon exemple de solution

    <h5 style="float: left; width: 50%;">Employee: Employee Name</h5>
<h5 style="float: right; width: 50%; text-align: right;">Employee: Employee Name</h5>

    Ce seront diviser votre page en deux et insérez les deux éléments d'en-tête à droite et à gauche de la partie également.

  5. 0

    Le code suivant va vous permettre d'avoir deux têtes sur la même ligne, la première aligné à gauche et la deuxième à droite-alignés, et a l'avantage de garder les deux en-têtes sur la même ligne de base.

    La Partie HTML:

    <h1 class="text-left-right">
    <span class="left-text">Heading Goes Here</span>
    <span class="byline">Byline here</span>
</h1>

    Et le CSS:

    .text-left-right {
    text-align: right;
    position: relative;
}
.left-text {
    left: 0;
    position: absolute;
}
.byline {
    font-size: 16px;
    color: rgba(140, 140, 140, 1);
}