Горизонтальное расположение информации

@zhenzhen · Регистрация: 04.10.2013

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

Необходимо сделать как на картинке, вот кусок моего кода, при котором 2я картинка оказывается внизу, т.е. после левой части, а нужно чтобы было все на уровне. Пробовала через float:left, но если задать всем классам левой части то картинка окажется на уровне, но будет немного выше, и при любых действиях поставить ее на одном уровне левая часть будет двигаться вместе с ней

HTML5
1
2
3
4
5
6
7
8
<div id="services">
        <div id="img"></div>
        <div class="text4"><p>Duis Aute Irure</p></div>
        <div class="text5"><p>Excepteur sint occaecat cupidatat.</p>
          <p> Ondent, sunt culpa qui ollit anim laborum aute irure dolor.</p>
          <p>Excepteur sint occaecat cupidatat oin. Proident unt culpa.</p></div>
        <div id="img2"></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
39
40
41
42
43
44
45
46
47
48
#services {
   width:100%;
   height:330px; 
    
}
 
#img {
background:url('../../images3/1.jpg') no-repeat ;
height:100px;
margin:0 60% 0 18%;
 width:20%;
 
}
 
.text4 p {
font-family:OpenSans;
opacity:0.8;
font-size:1.0em;
font-weight: bold;
word-spacing:1px;
text-align:left;
letter-spacing:1px;
text-transform:uppercase;
margin:1% 60% 1% 18%;
 width:20%;
 
}
 
.text5 p {
font-family:OpenSans;
opacity:0.7;
letter-spacing:0.5px;
font-size:0.8em;
font-weight: Regular;
text-align:center;
margin-left:-730px;
line-height:4px;
margin:0.5% 70% 0.5% 10%;
 width:25%;
 
}
 
#img2 {
background:url('../../images3/2.jpg') no-repeat ;
height:100px;
margin:0 45% 0 45%;
 width:10%;
}

@killlfun · 11.07.2014, 14:03

zhenzhen, дай весь код этого блока, всех трех.

@Дмитрий76 · 11.07.2014, 14:24

Обертку нужно добавить. И к ней уже float назначать.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div id="services">
 <div class="wrap">
        <div id="img"></div>
        <div class="text4"><p>Duis Aute Irure</p></div>
        <div class="text5"><p>Excepteur sint occaecat cupidatat.</p>
          <p> Ondent, sunt culpa qui ollit anim laborum aute irure dolor.</p>
          <p>Excepteur sint occaecat cupidatat oin. Proident unt culpa.</p></div>
</div>
<div class="wrap">
        <div id="img2"></div>
</div>
        </div>

CSS

CSS
1
2
3
4
5
6
7
8
.wrap{
    float:left;
    width: 32%;
    margin-left: 1%;
}
.wrap:first-child{
    margin-left: 0;
}

@zhenzhen · 11.07.2014, 15:01 **[ТС]**

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

zhenzhen, дай весь код этого блока, всех трех.

тот код, что я выложила это то, что я пока сделала, тк застопорилась на 2м блоке то дальше не иду и разбираюсь, как его сделать на одном уровне

@zhenzhen · 11.07.2014, 15:05 **[ТС]**

при таком раскладе с оберткой, у меня выходит как на 1 картинке, тоесть фон исчезает и сверху налезает следующий блок.
попробовала убрать обертку для второго блока и вроде все встало рядом, кроме текста, который почему-то внизу остался(

@memnoh666 · 11.07.2014, 15:09

сделай таблицу из одной строки и трех столбцов, а границы у таблицы 0рх

@vovandr · 11.07.2014, 15:13

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

сделай таблицу из одной строки и трех столбцов, а границы у таблицы 0рх

@zhenzhen · 11.07.2014, 15:14 **[ТС]**

могли бы что-то посоветовать?

@Дмитрий76 · 11.07.2014, 15:33

Я вам дал нормальный совет, если я правильно понял ваше затруднение.
Посмотрите, вам такой результат нужен http://jsfiddle.net/ysc68/7/ ?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
#services{
    overflow: hidden;
    background: green;
    text-align: center;
}
.wrap{
    float:left;
    width: 32%;
    margin-left: 1%;
}
.wrap:first-child{
    margin-left: 0;
}

https://www.cyberforum.ru/atta... 1405085223

@zhenzhen · 11.07.2014, 15:49 **[ТС]**

Сообщение от Дмитрий76

Я вам дал нормальный совет, если я правильно понял ваше затруднение.
Посмотрите, вам такой результат нужен http://jsfiddle.net/ysc68/7/ ?

по расположению все так, только чтобы фон был своего блока, а не следующего(тоесть не зеленого, а белого как на первой картинке)
все сделала, как вы сказали(только поменяла width: 32%; на 100% иначе все съезжалось)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="services">
        <div class="wrap">
        <div id="img"></div>
        <div class="text4"><p>Duis Aute Irure</p></div>
        <div class="text5"><p>Excepteur sint occaecat cupidatat.</p>
        <p> Ondent, sunt culpa qui ollit anim laborum aute irure dolor.</p>
        <p>Excepteur sint occaecat cupidatat oin. Proident unt culpa.</p></div>
        </div>
        <div class="wrap">
        <div id="img2"></div>
        
        <div class="text6"><p>Duis Aute Irure</p></div>
        </div>
        <div id="img3"></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
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
66
67
68
69
70
71
72
73
74
75
76
77
78
#services{
   width:100%;
    height:330px; 
    
}
 
.wrap{
    float:left;
    width: 100%;
   margin-left: 1%;
}
 
.wrap:first-child{
    margin-left: 0;
}
 
#img {
background:url('../../images3/1.jpg') no-repeat ;
height:100px;
margin:0 60% 0 18%;
 width:20%;
 
}
 
.text4 p {
font-family:OpenSans;
opacity:0.8;
font-size:1.0em;
font-weight: bold;
word-spacing:1px;
text-align:left;
letter-spacing:1px;
text-transform:uppercase;
margin:1% 60% 1% 18%;
 width:20%;
 
}
 
.text5 p {
font-family:OpenSans;
opacity:0.7;
letter-spacing:0.5px;
font-size:0.8em;
font-weight: Regular;
text-align:center;
margin-left:-730px;
line-height:4px;
margin:0.5% 70% 0.5% 10%;
 width:25%;
 
}
 
#img2 {
background:url('../../images3/2.jpg') no-repeat ;
height:100px;
margin:0 45% 0 45%;
 width:10%;
}
 
 
.text6 p {
font-family:OpenSans;
opacity:0.8;
font-size:1.0em;
font-weight: bold;
word-spacing:1px;
text-align:center;
letter-spacing:1px;
text-transform:uppercase;
 
}
 
#img3 {
background:url('../../images3/3.jpg') no-repeat ;
height:100px;
margin:1% 15% 3% 70%;
 width:10%;
}

результат этого на картинке, не знаю что сделать, чтобы поднялся второй блок?

@Дмитрий76 · 11.07.2014, 16:01

Ну, ладно, вот то же самое, только с белым фоном

http://jsfiddle.net/ysc68/9/

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#services{
    overflow: hidden;
    background: #fff;
    text-align: center;
    width: 100%;
}
.wrap{
    float:left;
    width: 32%;
    margin-left: 1%;
}
.wrap:first-child{
    margin-left: 0;
}

html.zip

Если результат устраивает, то просто посмотрите код: в левом верхнем углу HTML-разметка, в правом верхнем - CSS-оформление.
А заменять ширину на 100% точно не надо.

Комментарий администратора TaatshiПравила форума пункт 5.19
Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме.
Ссылка на песочницу - это бонус.

@zhenzhen · 11.07.2014, 16:28 **[ТС]**

спасибо большое!Разобралась.

@zhenzhen · 11.07.2014, 16:41 **[ТС]**

только теперь возникла другая проблема, как раз с фоном, что он не видит его, тоесть если я ставлю в блоке белый фон, то он так и остается зеленым(а это фон следующего блока), в чем может быть дело? вот я поставила заливку вот так

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
#services{
   width:100%;
    height:330px; 
    background: white;
    text-align: center;
}
 
.wrap{
    float:left;
    width: 32%;
   margin-left: 1%;
   background: white;
}

и получается он заливает эти части, но как быть с остальным, что между?

@Дмитрий76 · 11.07.2014, 17:01

Вы не полностью код скопировали, который я для вас сделал.

CSS
1
2
3
#services{
    overflow: hidden;
}

Это правило было написано как раз для того, чтобы избежать подобного недоразумения.
Ну или можно для блока с зеленым фоном добавить правило clear: both;

@zhenzhen · 11.07.2014, 17:21 **[ТС]**

вот clear:both подошло, спасибо!

Новые блоги и статьи Все статьи Все блоги /
Как писать чистый, тестируемый и качественный код на Python py-thonny 12.07.2025 Помню свой первый проект на Python. Работал тогда быстро, грязно, лишь бы работало. Код был похож на запутанный клубок - переменные по одной букве, функции на 200 строк, комментарии отсутствовали как. . .	Blazor и контроллер сервопривода IoT Meadow Maple Wired 11.07.2025 Я решил разобраться, как можно соединить современные веб-технологии с миром "железа". Интересная комбинация получилась из Blazor в качестве веб-интерфейса и микроконтроллера Meadow с его веб-сервером. . .	Генерация OpenQASM из кода Q# EggHead 10.07.2025 Летом 2024-го я начал эксперименты с библиотекой Q# Bridge, и знаете что? Она оказалась просто находкой для тех, кто работает на стыке разных квантовых экосистем. Основная фишка этой библиотеки -. . .	Изучаем новый шаблон ИИ-чата .NET AI Chat Web App stackOverflow 10.07.2025 В . NET появилось интересное обновление - новый шаблон ИИ-чата под названием . NET AI Chat Web App. Когда я впервые наткнулся на анонс этого шаблона, то сразу понял, что Microsoft наконец-то. . .	Результаты исследования от команды ARP (июль 2025 г.) Programma_Boinc 10.07.2025 Результаты исследования от команды ARP (июль 2025 г. ) Африканский проект по дождям (ARP) World Community Grid снова запущен! Мы рады поделиться обновленной информацией о нашем прогрессе с осени. . .
Angular vs Svelte - что лучше? Reangularity 09.07.2025 Сегодня рынок разделился на несколько четких категорий: тяжеловесы корпоративного уровня (Angular), гибкие универсалы (React), прогрессивные решения (Vue) и новая волна компилируемых фреймворков. . .	Code First и Database First в Entity Framework UnmanagedCoder 09.07.2025 Entity Framework дает нам свободу выбора, предлагая как Code First, так и Database First подходы. Но эта свобода порождает вечный вопрос — какой подход выбрать? Entity Framework — это. . .	Как использовать Bluetooth-модуль HC-05 с Arduino Wired 08.07.2025 Bluetooth - это технология, созданная чтобы заменить кабельные соединения. Обычно ее используют для связи небольших устройств: мобильных телефонов, ноутбуков, наушников и т. д. Работает она на частоте. . .	Руководство по структурам данных Python AI_Generated 08.07.2025 Я отчетливо помню свои первые серьезные проекты на Python - я писал код, он работал, заказчики были относительно довольны. Но однажды мой наставник, взглянув на мою реализацию поиска по огромному. . .	Тестирование энергоэффективности и скорости вычислений видеокарт в BOINC проектах Programma_Boinc 08.07.2025 Тестирование энергоэффективности и скорости вычислений видеокарт в BOINC проектах Опубликовано: 07. 07. 2025 Рубрика: Uncategorized Автор: AlexA Статья размещается на сайте с разрешения. . .

@killlfun 102 / 102 / 39 Регистрация: 25.02.2014 Сообщений: 321
	11.07.2014, 14:03
	zhenzhen, дай весь код этого блока, всех трех. 0

@zhenzhen 1 / 1 / 0 Регистрация: 04.10.2013 Сообщений: 46
	11.07.2014, 15:05 [ТС]
	при таком раскладе с оберткой, у меня выходит как на 1 картинке, тоесть фон исчезает и сверху налезает следующий блок. попробовала убрать обертку для второго блока и вроде все встало рядом, кроме текста, который почему-то внизу остался( Миниатюры 0

@memnoh666 0 / 0 / 0 Регистрация: 11.07.2014 Сообщений: 11
	11.07.2014, 15:09
	сделай таблицу из одной строки и трех столбцов, а границы у таблицы 0рх 0

@zhenzhen 1 / 1 / 0 Регистрация: 04.10.2013 Сообщений: 46
	11.07.2014, 15:14 [ТС]
	могли бы что-то посоветовать? 0

@zhenzhen 1 / 1 / 0 Регистрация: 04.10.2013 Сообщений: 46
	11.07.2014, 16:28 [ТС]
	спасибо большое!Разобралась. 0

@zhenzhen 1 / 1 / 0 Регистрация: 04.10.2013 Сообщений: 46
	11.07.2014, 17:21 [ТС]
	вот clear:both подошло, спасибо! 0

Горизонтальное расположение информации

Решение