Как растянуть img с пунктирной линией по ширине?

@Evgeniy55 · Регистрация: 14.03.2014

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

Добрый день, нужно как на фото, а получается по другому, уже много вариантов перебрал, не могу придумать как такое реализовать, или скорее всего я что то сделал не так
HTML:

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

<div class="popularMenu leftSide">
<div class="top">
<img src="images/leftArrow.png" alt="leftArrow">
<img src="images/rightArrow.png" alt="rightArrow">
<h2>Popular dishes in the menu</h2>
</div>
<div class="popularMenu clearfix">
<img src="images/omelette.png" alt="omelette">
<div><h3>Omelette</h3><div class="punktir"></div><p>$ 2,0</p></div>
</div>
<div class="popularMenu clearfix">
<img src="images/tomatoSoup.png" alt="tomatoSoup">
<h3>Tomato soup</h3><div class="punktir"></div><p>$ 4,50</p>
</div>
<div class="popularMenu clearfix">
<img src="images/crabClaw.png" alt="crabClaw">
<h3>Crab Claw</h3><div class="punktir"></div><p>$ 12,50</p>
</div>
<div class="popularMenu clearfix">
<img src="images/hunterPastry.png" alt="hunterPastry">
<h3>Hunter pastry</h3><div class="punktir"></div><p>$ 10,15</p>
</div>
</div>

CSS

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

.leftSide .popularMenu img{
float: left;
}
.popularMenu .punktir{
background: url("images/punktir.png") repeat-x bottom;
width: 24px;
height: 2px;
}
.popularMenu h3, .popularMenu .punktir{
display: inline-block;
}
.popularMenu p{
float: right;
}

IMG как на макете:

Как растянуть img с пунктирной линией по ширине?

IMG то как выглядит у меня сейчас (((

@iVKO · 02.03.2016, 14:33

Попробуйте ширину увеличить, например :

CSS
1
width:100%

@Evgeniy55 · 02.03.2016, 14:33 **[ТС]**

вот сам пунктир, если вдруг понадобится

Название: punktir.png
Просмотров: 16

Размер: 1.2 Кб

@Evgeniy55 · 02.03.2016, 14:41 **[ТС]**

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

Попробуйте ширину увеличить, например :
CSSВыделить код
1
width:100%

а какому элементу ? если с классом punktir, то он уходит вниз блока, а если его родителю .leftside, то тогда правое меню rightside исчезнет

я за это правое меню --->>>

@iVKO · 02.03.2016, 14:51

Ну если 100% не устраивает, попробуйте подгадать ширину в пикселях, хотя это не совсем правильно(вернее совсем неправильно, но работать должно

). А на деле, у вас ведь есть шаблон, посмотрите как там сделано(Правый клик мышкой по элементу->Посмотреть код).

@Evgeniy55 · 02.03.2016, 15:07 **[ТС]**

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

Ну если 100% не устраивает, попробуйте подгадать ширину в пикселях, хотя это не совсем правильно(вернее совсем неправильно, но работать должно ). А на деле, у вас ведь есть шаблон, посмотрите как там сделано(Правый клик мышкой по элементу->Посмотреть код).

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

Добавлено через 11 минут
надеюсь тут это решается не через то что каждый элемент включая картинку в див нужно заключить и через инлайн блок, а цену тоже в див но через флоат right, и тогда пунктиру задать 100% ширину и через отрицательный маргин подогнать, но тогда даже через оверфлоу хидден думаю как то коряво будет

@Shakalaka · 02.03.2016, 15:13

Evgeniy55,

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="menu__item">
  <span class="title">Some&nbsp;title</span>
  <span class="dots"></span>
  <span class="price">$100</span>
</div>
<div class="menu__item">
  <span class="title">Some&nbsp;other&nbsp;title</span>
  <span class="dots"></span>
  <span class="price">$10</span>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.menu__item{
  display:table;
  width:100%;
  table-layout:auto;
  margin-bottom:20px;
}
.title, .price, .dots{
  display:table-cell;
 
}
.dots{
  width:90%;
  background:url("https://www.cyberforum.ru/attachments/656696d1456917709") repeat-x;
  background-position:0 100%;
}

https://jsfiddle.net/shakalaka/9jr1wygL/

@Fedor92 · 02.03.2016, 15:13

Evgeniy55, вообще напрашивается список... Можно было бы для ли задать подчёркивание и с помощью отрицательного позиционирования перекрыть подчёркивание у левой и правой части, но проблема с фоном... Он у Вас просто серый или неоднородный?

@Evgeniy55 · 02.03.2016, 15:38 **[ТС]**

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

Он у Вас просто серый или неоднородный

фон через картинку с повторением, неоднородный

@Fedor92 · 02.03.2016, 15:44

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

фон через картинку с повторением

В этом вся загвоздка... На мой взгляд Shakalaka предложил весьма грамотный вариант... Вы его уже пробовали?

@Evgeniy55 · 02.03.2016, 18:15 **[ТС]**

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

https://jsfiddle.net/shakalaka/9jr1wygL/

еще чуть дополнил для картинок и получилось все кроме текста который обведен, его я не понял как вставить, пробовал разные варианты с table-row, вставлял класс с текстом в разные места, но он за собой тянул по содержимому другие ячейки таблицы, подскажите как быть с этим текстом ?

HTML

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

<div class="menu">
<div class="menu_item">
<span class="image"><img src="https://www.cyberforum.ru/images/omelette.png" alt=""></span>
<span class="title">Omelette</span>
<span class="dots"></span>
<span class="price">$ 2,0</span>
</div>
<div class="menu_item">
<span class="image"><img src="https://www.cyberforum.ru/images/tomatoSoup.png" alt=""></span>
<span class="title tomato">Tomato soup</span>
<span class="dots"></span>
<span class="price">$ 4,50</span>
</div>
<div class="menu_item">
<span class="image"><img src="https://www.cyberforum.ru/images/crabClaw.png" alt=""></span>
<span class="title CrabClaw">Crab Claw</span>
<span class="dots"></span>
<span class="price">$ 12,50</span>
</div>
<div class="menu_item">
<span class="image"><img src="https://www.cyberforum.ru/images/hunterPastry.png" alt=""></span>
<span class="title hunterPastry">Hunter pastry</span>
<span class="dots"></span>
<span class="price">$ 10,15</span>
</div>
</div>

CSS

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

.leftSide .menu{
margin-top: 20px;
}
.leftSide .menu_item{
display: table;
width:100%;
table-layout:auto;
margin-bottom: 10px;
}
.leftSide .title, .leftSide .price, .leftSide .dots{
display:table-cell;
vertical-align: top;
padding: 8px 0 0 12px;
}
.leftSide .title{
padding-right: 5px;
}
.leftSide .dots{
width:90%;
background:url("https://www.cyberforum.ru/images/dots.png") repeat-x 0 22%;
vertical-align: top;
}

то что получилось:

чего еще не хватает:

@Evgeniy55 · 02.03.2016, 18:16 **[ТС]**

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

В этом вся загвоздка... На мой взгляд Shakalaka предложил весьма грамотный вариант... Вы его уже пробовали?

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

@Fedor92 · 02.03.2016, 18:20

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

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

А если задать максимальную ширину?

@Evgeniy55 · 02.03.2016, 18:30 **[ТС]**

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

А если задать максимальную ширину?

вот как я пробовал и что в итоге вышло,

HTML5
1
2
3
4
5
6
7
<div class="menu_item">
                        <span class="image"><img src="https://www.cyberforum.ru/images/omelette.png" alt=""></span>
                        <span class="title">Omelette</span>
                        <span class="dots"></span>
                        <span class="price">$&nbsp;2,0</span>
                        <span class="text">ejrgrjkkkkkkkkkkkkknnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn</span>
                    </div>

CSS
1
2
3
4
.leftSide .text{
    width: 100%;
    display: table-row;
}

@Fedor92 · 02.03.2016, 18:55

Evgeniy55, как вариант:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title> animation1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
#first{width:80%}
p.text{
text-align:justify;
width:100%;
margin-top:20px
}
.menu__item{
  display:table;
  width:100%;
  table-layout:auto;
  margin-bottom:20px;
}
.title, .price, .dots{
  display:table-cell;
 
}
.dots{
  width:100%;
  background:url("https://www.cyberforum.ru/attachments/656696d1456917709") repeat-x;
  background-position:0 100%;
}
        
    </style>
</head>
<body>
<div id="first">
    <img alt="Смайлики" src=http://liubavyshka.ru/_ph/4/1/415083084.jpg style="float:left">
    <div class="menu_item">
        <span class="title">Omelette</span>
        <span class="dots"></span>
        <span class="price">$&nbsp;2,0</span>
    </div>
    <p class="text">"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."</p>
</div>
</body>
</html>

@Evgeniy55 · 02.03.2016, 19:50 **[ТС]**

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

как вариант:

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

мой вариант: https://jsfiddle.net/n717jdv8/2/

ваш вариант: https://jsfiddle.net/hoksmh1x/2/

@Fedor92 · 02.03.2016, 20:25

Evgeniy55, типа так хотели:

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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251 /">
<title>123</title>
<style>
.menuWrap{width:80%}
.menuWrap>img{float:left}
p.text{
text-align:justify;
width:100%;
margin-top:20px
}
.menu__item{
  display:table;
  width:100%;
  table-layout:auto;
  margin-bottom:20px;
}
.title, .price, .dots{
  display:table-cell;
 
}
.dots{
  width:100%;
  background:url("https://www.cyberforum.ru/attachments/656696d1456917709") repeat-x;
  background-position:0 100%;
}
</style>
</head>
<body>
<div class="menuWrap">
    <img alt="Смайлики" src=http://liubavyshka.ru/_ph/4/1/415083084.jpg>
    <div class="menu_item">
        <span class="title">Omelette</span>
        <span class="dots"></span>
        <span class="price">$&nbsp;2,0</span>
    </div>
    <p class="text">"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."</p>
</div>
</body>
</html>

@Evgeniy55 · 02.03.2016, 21:05 **[ТС]**

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

типа так хотели:

да, спасибо огромное

нашел вроде только одно отличие, а именно:
- у меня в хтмл класс был такой .menu_item и в css соответственно такой же
- в вашем варианте в хтмл я поставил класс такой же как и у меня .menu_item но в css .menu__item как у вас(двойное подчеркивание или как оно там называется),и не сработало, глаза думал вылезут, ну не нашел больше отличий, затем взял просто скопировал ваш стиль и только картинки свои подставил, вуаля, заработало, так и не понял из-за чего, и ради интереса из класса в стилях вместо двойного подчеркивания сделал одинарное и получился косяк, вообщем работает когда в стиле именно двойное подчеркивание, я с таким еще не сталкивался, почему так ? буду признателен если еще подскажете что именно надо бы почитать за этот нюанс, хочу понять это

@Fedor92 · 02.03.2016, 22:03

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

получился косяк

Получился, причём мой...

Данный стиль вообще не нужен(стиль для .menu_item)...

Я когда Вам выкладывал готовый вариант, забыл его удалить... Надеюсь у Вас не сильная моральная травма...

@Evgeniy55 · 02.03.2016, 22:07 **[ТС]**

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

Данный стиль вообще не нужен...

1) т.е .menu_item можно удалять из html и css ?

2) так а что все равно за прикол с двойным подчеркиванием .menu__item, ведь он отличается от класса в хтмл где одинарное, а с одинарным не работает, как так ? ))

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью 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 полиномов. . .

@Evgeniy55 108 / 102 / 35 Регистрация: 14.03.2014 Сообщений: 586

	Как растянуть img с пунктирной линией по ширине? 02.03.2016, 14:26. Показов 1837. Ответов 21 Метки нет (Все метки) Добрый день, нужно как на фото, а получается по другому, уже много вариантов перебрал, не могу придумать как такое реализовать, или скорее всего я что то сделал не так HTML: Кликните здесь для просмотра всего текста <div class="popularMenu leftSide"> <div class="top"> <img src="images/leftArrow.png" alt="leftArrow"> <img src="images/rightArrow.png" alt="rightArrow"> <h2>Popular dishes in the menu</h2> </div> <div class="popularMenu clearfix"> <img src="images/omelette.png" alt="omelette"> <div><h3>Omelette</h3><div class="punktir"></div><p>$ 2,0</p></div> </div> <div class="popularMenu clearfix"> <img src="images/tomatoSoup.png" alt="tomatoSoup"> <h3>Tomato soup</h3><div class="punktir"></div><p>$ 4,50</p> </div> <div class="popularMenu clearfix"> <img src="images/crabClaw.png" alt="crabClaw"> <h3>Crab Claw</h3><div class="punktir"></div><p>$ 12,50</p> </div> <div class="popularMenu clearfix"> <img src="images/hunterPastry.png" alt="hunterPastry"> <h3>Hunter pastry</h3><div class="punktir"></div><p>$ 10,15</p> </div> </div> CSS Кликните здесь для просмотра всего текста .leftSide .popularMenu img{ float: left; } .popularMenu .punktir{ background: url("images/punktir.png") repeat-x bottom; width: 24px; height: 2px; } .popularMenu h3, .popularMenu .punktir{ display: inline-block; } .popularMenu p{ float: right; } IMG как на макете: IMG то как выглядит у меня сейчас ((( Изображения 0

@Evgeniy55 108 / 102 / 35 Регистрация: 14.03.2014 Сообщений: 586
	02.03.2016, 14:33 [ТС]
	вот сам пунктир, если вдруг понадобится 0

@iVKO 24 / 24 / 13 Регистрация: 04.02.2015 Сообщений: 96
	02.03.2016, 14:51
	Ну если 100% не устраивает, попробуйте подгадать ширину в пикселях, хотя это не совсем правильно(вернее совсем неправильно, но работать должно ). А на деле, у вас ведь есть шаблон, посмотрите как там сделано(Правый клик мышкой по элементу->Посмотреть код). 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	02.03.2016, 15:13
	Evgeniy55, вообще напрашивается список... Можно было бы для ли задать подчёркивание и с помощью отрицательного позиционирования перекрыть подчёркивание у левой и правой части, но проблема с фоном... Он у Вас просто серый или неоднородный? 0

Как растянуть img с пунктирной линией по ширине?

Решение