La date dans le coin supérieur droit provoque le décentrement de l'en-tête

-1

La date dans le coin droit de chaque poste entraîne le non-centrage de l'élément H2.La date dans le coin supérieur droit provoque le décentrement de l'en-tête

C'est un problème très simple, avec un résultat ennuyeux. J'ai essayé beaucoup de choses, et je n'arrive toujours pas à l'empêcher de se décentrer! Je sais qu'il y a une solution, mais je n'arrive toujours pas à y remédier.

est ici une image décrivant la question:

Voici le code:

body { 
 
    font-family: 'Roboto', Arial, Helvetica, sans-serif; 
 
    background-color: #FFFFFF; 
 
    color: #000000; 
 
    text-align: center; 
 
} 
 
.container { 
 
    width: 80%; 
 
    display: inline-block; 
 
} 
 
.post { 
 
    border: 2px solid #000000; 
 
    padding: 0px 4px 0px 4px; 
 
} 
 
.post p,h2 { 
 
    margin: 0; 
 
} 
 
.post h2 { 
 
    text-align: center; 
 
} 
 
.post p { 
 
    text-align: left; 
 
    text-indent: 40px; 
 
    line-height: 1.8; 
 
} 
 
hr {visibility: hidden;} 
 
.date { 
 
    float: right; 
 
    font-size: 12pt; 
 
    font-style: italic; 
 
    font-weight: normal; 
 
} 
 
@media screen and (max-width: 600px){ 
 
    .container {width: 100%;} 
 
    .post p {text-align: justify;text-indent: 0px;font-size: 14pt;} 
 
}

<body> 
 
<h1>Welcome to Henry's Blog!</h1> 
 
<div class="container"> 
 
    <div class="post" id="10"> 
 
    <span class="date">10/15/17</span> 
 
    <h2>Tenth Post</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
 
    </div> 
 
    <hr> 
 
    <div class="post" id="9"> 
 
    <span class="date">10/15/17</span> 
 
    <h2>Ninth Post</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
 
    </div> 
 
    <hr> 
 
    <div class="post" id="8"> 
 
    <span class="date">10/15/17</span> 
 
    <h2>Eighth Post</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
 
    </div> 
 
    <hr> 
 
    <div class="post" id="7"> 
 
    <span class="date">10/15/17</span> 
 
    <h2>Seventh Post</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
 
    </div> 
 
    <hr> 
 
    <div class="post" id="6"> 
 
    <span class="date">10/15/17</span> 
 
    <h2>Sixth Post</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
 
    </div> 
 
    <hr> 
 
    <div class="post" id="5"> 
 
    <span class="date">10/15/17</span> 
 
    <h2>Fifth Post</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
 
    </div> 
 
    <hr> 
 
    <div class="post" id="4"> 
 
    <span class="date">10/15/17</span> 
 
    <h2>Fourth Post</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
 
    </div> 
 
    <hr> 
 
    <div class="post" id="3"> 
 
    <span class="date">10/15/17</span> 
 
    <h2>Third Post</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
 
    </div> 
 
    <hr> 
 
    <div class="post" id="2"> 
 
    <span class="date">10/15/17</span> 
 
    <h2>Second Post</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
 
    </div> 
 
    <hr> 
 
    <div class="post" id="1"> 
 
    <h2>First Post</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
 
    </div> 
 
    <hr> 
 
    <p>Blog Posts: <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> <a href="#4">4</a> <a href="#5">5</a> <a href="#6">6</a> <a href="#7">7</a> <a href="#8">8</a> <a href="#9">9</a> <a href="#10">10</a></p> 
 
</div> 
 
</body> 
 
</html>

Source

2017-10-16 Henry7720

Pourquoi l'avez-vous diffusé? –

Personne ne regardait la question précédente, j'en ai donc créé une autre, mais je n'ai pas pu supprimer l'autre, car je l'ai remplacé ... – Henry7720

Au lieu d'utiliser float - qui aura une incidence sur le positionnement de l'élément environnant - vous pouvez utiliser le positionnement absolu, qui ne sera pas affecter le positionnement des autres éléments du tout.

Vous avez besoin de 2 changements:

1: Faire le rapport parent, de sorte que la date est positionnée par rapport à elle et non la page principale:

.post { 
    position: relative; 
    /* rest of styles... */ 
}

2: Changer la position de absolue, et mettre en haut & droit de donner un peu de "padding" autour de la date:

.date { 
    position: absolute; 
    top: 5px; 
    right: 5px; 
    /* rest of styles... */ 
}

de travail Exemple:

body { 
 
    font-family: 'Roboto', Arial, Helvetica, sans-serif; 
 
    background-color: #FFFFFF; 
 
    color: #000000; 
 
    text-align: center; 
 
} 
 

 
.container { 
 
    width: 80%; 
 
    display: inline-block; 
 
} 
 

 
.post { 
 
    border: 2px solid #000000; 
 
    padding: 0px 4px 0px 4px; 
 
    position: relative; 
 
} 
 

 
.post p, 
 
h2 { 
 
    margin: 0; 
 
} 
 

 
.post h2 { 
 
    text-align: center; 
 
} 
 

 
.post p { 
 
    text-align: left; 
 
    text-indent: 40px; 
 
    line-height: 1.8; 
 
} 
 

 
hr { 
 
    visibility: hidden; 
 
} 
 

 
.date { 
 
    position: absolute; 
 
    top: 5px; 
 
    right: 10px; 
 
    font-size: 12pt; 
 
    font-style: italic; 
 
    font-weight: normal; 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    .container { 
 
    width: 100%; 
 
    } 
 
    .post p { 
 
    text-align: justify; 
 
    text-indent: 0px; 
 
    font-size: 14pt; 
 
    } 
 
}

<body> 
 
    <h1>Welcome to Henry's Blog!</h1> 
 
    <div class="container"> 
 
    <div class="post" id="10"> 
 
     <span class="date">10/15/17</span> 
 
     <h2>Tenth Post</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus 
 
     feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae 
 
     nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
 
    </div> 
 
    <hr> 
 
    <div class="post" id="9"> 
 
     <span class="date">10/15/17</span> 
 
     <h2>Ninth Post</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus 
 
     feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae 
 
     nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
 
    </div> 
 
    <hr> 
 
    <div class="post" id="8"> 
 
     <span class="date">10/15/17</span> 
 
     <h2>Eighth Post</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus 
 
     feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae 
 
     nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
 
    </div> 
 
    <hr> 
 
    <div class="post" id="7"> 
 
     <span class="date">10/15/17</span> 
 
     <h2>Seventh Post</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus 
 
     feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae 
 
     nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
 
    </div> 
 
    <hr> 
 
    <div class="post" id="6"> 
 
     <span class="date">10/15/17</span> 
 
     <h2>Sixth Post</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus 
 
     feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae 
 
     nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
 
    </div> 
 
    <hr> 
 
    <div class="post" id="5"> 
 
     <span class="date">10/15/17</span> 
 
     <h2>Fifth Post</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus 
 
     feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae 
 
     nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
 
    </div> 
 
    <hr> 
 
    <div class="post" id="4"> 
 
     <span class="date">10/15/17</span> 
 
     <h2>Fourth Post</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus 
 
     feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae 
 
     nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
 
    </div> 
 
    <hr> 
 
    <div class="post" id="3"> 
 
     <span class="date">10/15/17</span> 
 
     <h2>Third Post</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus 
 
     feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae 
 
     nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
 
    </div> 
 
    <hr> 
 
    <div class="post" id="2"> 
 
     <span class="date">10/15/17</span> 
 
     <h2>Second Post</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus 
 
     feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae 
 
     nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
 
    </div> 
 
    <hr> 
 
    <div class="post" id="1"> 
 
     <h2>First Post</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus 
 
     feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae 
 
     nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
 
    </div> 
 
    <hr> 
 
    <p>Blog Posts: <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> <a href="#4">4</a> <a href="#5">5</a> <a href="#6">6</a> <a href="#7">7</a> <a href="#8">8</a> <a href="#9">9</a> <a href="#10">10</a></p> 
 
    </div> 
 
</body> 
 

 
</html>

Note: parce que les éléments qui l'entourent ne prennent pas l'élément positionné absolu en compte, je suggère d'utiliser les requêtes des médias pour changer sa position sur les petits écrans, au lieu d'essayer de l'écraser

Source

2017-10-17 00:56:16 FluffyKitten

Vous êtes à la recherche de la position: absolute ...

.date { 
    font-size: 12pt; 
    font-style: italic; 
    font-weight: normal; 
    position:absolute; 
    right: 4px 
}

alors donner h2 un rembourrage approprié pour les titres plus longs, comme:

.post h2 { 
    text-align: center; 
    padding: 0 60px 
}

https://jsfiddle.net/Lnnd9u04/

Source

2017-10-17 00:55:47 Hagen

La date dans le coin supérieur droit provoque le décentrement de l'en-tête

Répondre

Questions connexes