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

Question

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

H3K4R

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

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

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

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

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

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

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

Войти через центр авторизации

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

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

Простой
Как обойти блокировку?
- 1 подписчик
- час назад
- 22 просмотра
1

ответ
HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- 10 часов назад
- 67 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему не работает pattern на input?
- 1 подписчик
- 10 часов назад
- 51 просмотр
2

ответа
JavaScript

+3 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 11 часов назад
- 52 просмотра
1

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

Простой
Не будет ли проблем при использовании хостинга другой страны?
- 1 подписчик
- 13 часов назад
- 83 просмотра
2

ответа
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- 13 часов назад
- 48 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- 14 часов назад
- 61 просмотр
1

ответ
CSS

Простой
Как сделать так, чтобы при наведении на один объект, меняется другой, с помощью hover?
- 1 подписчик
- 16 часов назад
- 52 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- 17 часов назад
- 74 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- 18 часов назад
- 37 просмотров
1

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

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Доработать телеграм бота

19 апр. 2024, в 03:52

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

Написать код на python

19 апр. 2024, в 03:01

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

Настройка сервера

18 апр. 2024, в 21:56

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

а скрин как нам должен помочь? мы откуда знаем как ты расположил эти параграфы и заголовки? код нужен.
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;
}

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

Это ДЭМО

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

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

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

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