Помещение одного блока в другой

@Imperion · Регистрация: 22.12.2015

Студворк — интернет-сервис помощи студентам

В общем требуется сверстать макет поста на сайте. Пост будет состоять из картинки и описания.
Картинка должна быть слева - описание справа.

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="post1">
                    <div class="content_post1">
                         <div class="img_post1">
                            <img src="https://www.cyberforum.ru/images/post1.png" width="180" height="180" />
                         </div>
                             <div class="wrap_text_post1">
                                 <div class="info_post1"><span><a href="#"><img src="https://www.cyberforum.ru/images/icon_admin.png" width="13" height="15" /> Admin</a></span> - Nov 28th, 2010</div>
                                 <div class="comments_post1"><a href="#"><img src="https://www.cyberforum.ru/images/comment.png" width="12" height="9" /> 10 Comments</a></div>
                                 <h2>Vintage business card PSD (front & back)</h2>
                                 <div class="text_post1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean<br /> 
                                 fermentum malesuada orci a commodo. Aenean dapibus urna quis<br />
                                 nulla consequat sagittis. Quisque ut ultrices massa. Mauris felis felis, <br />
                                 rutrum sit amet vehicula ut, tempus quis lectus. . </div>
                                 <div class="read_more">Read more</div>   
                             </div>
                    </div>
                </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.post1{
    outline: 1px solid #754733;
}
.img_post1{
    height: 200px;
    width: 200px;
    background-color: #f3f3f3;
}
.img_post1 img{
    position: absolute;
    margin: 10px;
}
.wrap_text_post1{
    outline: 1px solid #cc0000;
    float: right;
    margin: 5px 0 0 19px;
}
.post1 a{
    text-decoration: none;
}
.info_post1{
    font: 11px Arial, sans-serif;
    color: #868686;
}
.info_post1 span a{
    color: #EC5C28;  
}
.comments_post1 a{
    font: 11px Arial, sans-serif;
    color: #EC5C28; 
}
.post1 h2{
    font: 20px Arial, sans-serif;
    color: #373737;
}
.text_post1{
    font: 13px Arial, sans-serif;
}

Вот как это выглядит сейчас:

@Fedor92 · 19.03.2016, 22:23

Можно так например:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
 <head>
  <title>CSS</title>
   <style TYPE="text/css">
.post1{
    outline: 1px solid #754733;
}
.img_post1{
    height: 200px;
    width: 200px;
    background-color: #f3f3f3;
}
.img_post1 img{
    position: absolute;
    margin: 10px;
}
.wrap_text_post1{
    outline: 1px solid #cc0000;
    float: right;
    margin: 5px 0 0 19px;
}
.post1 a{
    text-decoration: none;
}
.info_post1{
    font: 11px Arial, sans-serif;
    color: #868686;
}
.info_post1 span a{
    color: #EC5C28;  
}
.comments_post1 a{
    font: 11px Arial, sans-serif;
    color: #EC5C28; 
}
.post1 h2{
    font: 20px Arial, sans-serif;
    color: #373737;
}
.text_post1{
    font: 13px Arial, sans-serif;
}
 
  </style>
 </head>
<body>
   <div class="post1">
        <div class="content_post1">
            <img src="https://www.cyberforum.ru/images/post1.png" width="180" height="180" />
            <div class="wrap_text_post1">
                <div class="info_post1"><span><a href="#"><img src="https://www.cyberforum.ru/images/icon_admin.png" width="13" height="15" /> Admin</a></span> - Nov 28th, 2010</div>
                <div class="comments_post1"><a href="#"><img src="https://www.cyberforum.ru/images/comment.png" width="12" height="9" /> 10 Comments</a></div>
                <h2>Vintage business card PSD (front & back)</h2>
                <div class="text_post1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean<br /> 
                    fermentum malesuada orci a commodo. Aenean dapibus urna quis<br />
                    nulla consequat sagittis. Quisque ut ultrices massa. Mauris felis felis, <br />
                    rutrum sit amet vehicula ut, tempus quis lectus. . 
                </div>
                <div class="read_more">Read more</div>   
            </div>               
        </div>            
    </div>
</body>
</html>

@Imperion · 19.03.2016, 22:32 **[ТС]**

А в чем разница? Просмотрел свой код и Ваш, не могу найти отличий. Помогите разобраться пожалуйста

@Fedor92 · 19.03.2016, 22:39

Сообщение от Imperion

А в чем разница? Просмотрел свой код и Ваш, не могу найти отличий. Помогите разобраться пожалуйста

Я у картинки убрал блок обёртку - вот и вся магия...

@Imperion · 19.03.2016, 22:47 **[ТС]**

А если он сильно нужен как быть?)

@Fedor92 · 19.03.2016, 22:55

Сообщение от Imperion

А если он сильно нужен как быть?)

Тогда для img_post1 надо задать float:left(можно ещё задать display:inline-block, как вариант, тогда из потока выпадет только правый блок с текстом)...

При этом оба блока выпадут из потока... Если граница родительского блока будет иметь значение, то его надо растянуть по высоте - либо тоже задать float... Альтернативное решение - использование position:absolute...

@Imperion · 19.03.2016, 23:00 **[ТС]**

Понял, спасибо за помощь!)

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@Imperion -44 / 2 / 3 Регистрация: 22.12.2015 Сообщений: 508
	19.03.2016, 22:32 [ТС]
	А в чем разница? Просмотрел свой код и Ваш, не могу найти отличий. Помогите разобраться пожалуйста 0

@Imperion -44 / 2 / 3 Регистрация: 22.12.2015 Сообщений: 508
	19.03.2016, 22:47 [ТС]
	А если он сильно нужен как быть?) 0

@Imperion -44 / 2 / 3 Регистрация: 22.12.2015 Сообщений: 508
	19.03.2016, 23:00 [ТС]
	Понял, спасибо за помощь!) 0

Помещение одного блока в другой

Решение