Как разместить параграф под заголовком?

Question

Александр Волков @hopel19

H3K4R

Как разместить параграф под заголовком?

Нужно что бы параграфы находились под заголовками, как это реализовать?

Вопрос задан более трёх лет назад
498 просмотров

4 комментария

Подписаться 1 Оценить 4 комментария

iBird Rose @iiiBird Куратор тега CSS

а скрин как нам должен помочь? мы откуда знаем как ты расположил эти параграфы и заголовки? код нужен.
p.s. могу предположить что для h1 ты сделал float:left;

Написано более трёх лет назад

Александр Волков @hopel19 Автор вопроса

<!--<!DOCTYPE html>
<html>
<head>
	<title>My Website</title>
	<link rel="stylesheet" href="C:\Users\АлександрКомаров\Проекты\learning6\css\mysite.css">
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
	<header id="header">
			<div id="menu">
				<a class="logo" href="/"><img src="C:\Users\АлександрКомаров\Проекты\learning6\images\logo.png" width="50px">Expire</a>
				<ol class="nav">	
					<li class="nav"><a href="#">HOME</a></li>
					<li class="nav"><a href="#">PORTFOLIO</a></li>
					<li class="nav"><a href="#">BLOG</a></li>
					<li class="nav"><a href="#">PAGES</a></li>
					<li class="nav"><a href="#">ABOUT US</a></li>
					<li class="nav"><a href="#">CONTACT</a></li>					
				</ol>
			</div>				
	</header>
		<div class="container">
			<h1>Typograpy</h1>
			</div>
		</div>
		<div id="parallelogram"></div>	
			<div id="text-page">
				<p id="text">HOME>PAGES>TYPOGRAPY</p>
			</div>
		<div class="heading">
			<div class="blf f1"></div>
			<h1 class="bl f1">Heading  H1</h1> 
				<p class="par">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius mod te mpor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
			<div class="bl f2"></div>
			<h2>Heading H2</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius mod te mpor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			<div class="bl f3"></div>
			<h3>Heading H3</h3> 
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius mod te mpor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			<div class="bl f4"></div>
		</div>
</body>
</html> -->

Написано более трёх лет назад

Александр Волков @hopel19 Автор вопроса

body {
	font-family:'Raleway', sans-serif;
}

#menu {
	width: 100%;
	height: 100px;
	background-color: #2e3844;
	display: flex;
	font-size: 25px;


}

.logo {
	display: block;
	color: white;
	text-decoration: none;
	font-size:50px;
	margin-left: 20px;
	margin-top: 10px;

}
#parallelogram {
	width: 160px;
    height: 50px;
    background: #656d78;
    margin-left: 60em;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -o-transform: skew(30deg);
    transform: skew(30deg);
}

#text-page {
	margin-left: 65em;
	margin-top: -66px;
    width: 865px;
    height: 50px;
    background: #656d78;

}

#text {
	color:white;
	margin-left: 80px;
}

li {
	display: inline-flex;
	margin-left: 15px;

	
}

li a {
	color: white;
	text-decoration: none;
}

.container {
	width: 100%;
	height: 10em;
}

.img {
	width: 120em;
	height: 10em;
}

.container {
	margin-top: -50px;
	background: #757c86;
	width: 100%;
	height: 160px;
	color: white;
	font-size: 30px;
}
.container h1 {
	margin-left: 50px;
	padding-top: 25px;
}

}

.heading {
	margin: 20px;
	padding:20px;
}

.bl {
display: block;
clear: both;
}

.heading {
	display: inline-block;
	clear: both;
}

.nav {
	display: flex;
	margin-top: 17px;
	margin-left: 100px;
}

Написано более трёх лет назад

iBird Rose @iiiBird Куратор тега CSS

Александр Волков: https://jsfiddle.net/xr5zb6f0/
стилей недостаточно. как блоки в 3 колонки располагаются?

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 24 минуты назад
- 20 просмотров
1

ответ
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 5 часов назад
- 48 просмотров
0

ответов
PHP

+3 ещё

Простой
Firefox больше не отправляет в HTTP_ACCEPT image/webp?
- 3 подписчика
- 13 часов назад
- 199 просмотров
2

ответа
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 15 часов назад
- 66 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 15 часов назад
- 42 просмотра
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 19 часов назад
- 49 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как подключить поисковую систему в js?
- 1 подписчик
- 20 часов назад
- 74 просмотра
1

ответ
Веб-разработка

+1 ещё

Простой
Какой отечественный linux выбрать для веб-разработки?
- 2 подписчика
- 22 часа назад
- 849 просмотров
7

ответов
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- вчера
- 87 просмотров
1

ответ
Веб-разработка

+1 ещё

Средний
Как сделать загрузочный экран, чтобы он был виден всем кто онлайн?
- 1 подписчик
- вчера
- 105 просмотров
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Сделать 5 видеобэкграундов для выступления детей

23 нояб. 2024, в 13:29

400 руб./за проект

Разработать Back-end часть веб-приложения

23 нояб. 2024, в 12:39

100000 руб./за проект

Написать код на языке Python

23 нояб. 2024, в 12:16

60000 руб./за проект

а скрин как нам должен помочь? мы откуда знаем как ты расположил эти параграфы и заголовки? код нужен.
p.s. могу предположить что для h1 ты сделал float:left;
body { font-family:'Raleway', sans-serif; } #menu { width: 100%; height: 100px; background-color: #2e3844; display: flex; font-size: 25px; } .logo { display: block; color: white; text-decoration: none; font-size:50px; margin-left: 20px; margin-top: 10px; } #parallelogram { width: 160px; height: 50px; background: #656d78; margin-left: 60em; -webkit-transform: skew(30deg); -moz-transform: skew(30deg); -o-transform: skew(30deg); transform: skew(30deg); } #text-page { margin-left: 65em; margin-top: -66px; width: 865px; height: 50px; background: #656d78; } #text { color:white; margin-left: 80px; } li { display: inline-flex; margin-left: 15px; } li a { color: white; text-decoration: none; } .container { width: 100%; height: 10em; } .img { width: 120em; height: 10em; } .container { margin-top: -50px; background: #757c86; width: 100%; height: 160px; color: white; font-size: 30px; } .container h1 { margin-left: 50px; padding-top: 25px; } } .heading { margin: 20px; padding:20px; } .bl { display: block; clear: both; } .heading { display: inline-block; clear: both; } .nav { display: flex; margin-top: 17px; margin-left: 100px; }
Александр Волков: https://jsfiddle.net/xr5zb6f0/
стилей недостаточно. как блоки в 3 колонки располагаются?

Answer 1 · 2017-05-31 08:17:47

dummyman @dummyman

диссидент-схизматик

У текста под заголовком

display:block; 
clear:both;

Ответ написан более трёх лет назад

Комментировать

Answer 2 · 2017-05-31 09:31:31

Я применил css table

код

<div clas="wrapper">
<div class="row">
  <div class="post">
  <h3>Lorem Ipsum 1</h3>
  <p>
    Curabitur aliquet quam id dui posuere blandit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada.
  </p>
  </div>
  <div class="post">
   <h3>Lorem ipsum 2</h3>
  <p>
    Curabitur aliquet quam id dui posuere blandit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada.
  </p>
  </div>
  <div class="post">
  <h3>Lorem ipsum 3</h3>
  <p>
    Curabitur aliquet quam id dui posuere blandit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada.
  </p>
  </div>
  </div>
</div>

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.clear,.clear:after,.clear:before{
  content:"";
  display:block;
  clear:both;
}
.wrapper{
  display:table;
  width:90%;
  margin:auto;
}
.row{
  display:table-row;
}
.post{
  display:table-cell;
  width:1000px;
}
.post h3{
  padding-left:8px;
}
.post p{
  padding:8px;
  margin:auto;
  text-align:justify;
}

Если сделаете всё как из пункта код то будет так ( скрин )

Это ДЭМО

Как разместить параграф под заголовком?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт