0

.about_content{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.content img{
	display: block;
	margin:0 auto;
	width:100px;
	height: 100px;
	justify-content: center;
}
.content p{
	text-align: right;
}
<div class="about_us">
		<div class="wrapper">
			<h1>ABOUT US</h1>
			<p>Proin iaculis purus consequat sem cure.</p>	
			<div class="about_content">
				<div class="content">
					<img src="img/image1.png" alt="">
					<h3>Treehouse Template</h3>
					<p>Web Design</p>
				</div>
				<div class="content">
					<p><img src="img/image1.png" alt="">
					Web Design</p>
				</div>
				<div class="content">
					<img src="img/image1.png" alt="">
					<h3>Treehouse Template</h3>
					<p>Web Design</p>
				</div>

			</div>
		</div>
	</div>

Не обязательно все расписывать, просто подскажите при помощи чего можно реализовать данный блок сайта, и что нужно почитать и выучить для этого. Заранее спасибо.

введите сюда описание изображения

7
  • голого html+css хватит 11 мар 2019 в 17:20
  • не пойму как выровнять текст слева и справа
    – yavis
    11 мар 2019 в 17:34
  • вы добавьте свой вариант верстки в виде примера кода в вопрос, там спец кнопочка есть, добавить пример кода 11 мар 2019 в 17:36
  • Добавил, но за этот код мне стыдно. А в голову ничего толкового как это реализовать не лезет, возможно из-за отсутствия знаний в этом вопросе
    – yavis
    11 мар 2019 в 17:42
  • не надо стыдиться спросить 11 мар 2019 в 17:42

1 ответ 1

3

если по-простому, например так. В принципе даже flex особо не нужны.

div,
p {
    padding: 0;
    margin: 0;
}

.about_content {
    margin: 0 auto;
    width: 700px;
}

.about_content .content {
    position: relative;
    width: 50%;
}

.content img {
    position: absolute;
    display: block;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.about_content .content:nth-child(odd) img {
    right: 0;
    transform: translateX(50%)
}

.about_content .content:nth-child(odd) h3,
.about_content .content:nth-child(odd) p {
    padding-right: 70px;
    text-align: right;
}

.about_content .content:nth-child(even) {
    margin-left: auto;
    margin-right: 0;
}

.about_content .content:nth-child(even) img {
    left: 0;
    transform: translateX(-50%)
}

.about_content .content:nth-child(even) h3,
.about_content .content:nth-child(even) p {
    padding-left: 70px;
}
<div class="about_us">
    <div class="wrapper">
        <h1>ABOUT US</h1>
        <p>Proin iaculis purus consequat sem cure.</p>
        <div class="about_content">
            <div class="content">
                <img src="http://placeimg.com/300/300/an" alt="">
                <h3>Treehouse Template</h3>
                <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder
                    of human happiness. </p>
            </div>
            <div class="content">
                <img src="http://placeimg.com/300/300/an" alt="">
                <h3>Treehouse Template</h3>
                <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder
                    of human happiness. </p>
            </div>
            <div class="content">
                <img src="http://placeimg.com/300/300/an" alt="">
                <h3>Treehouse Template</h3>
                <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder
                    of human happiness. </p>
            </div>

        </div>
    </div>
</div>

1
  • Спасибо, сейчас попробую
    – yavis
    11 мар 2019 в 18:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.