Sign in to follow this  
Guest comhunt

Как сделать так чтобы элементы DIV перестали переходить на новую строку?

Recommended Posts

Guest comhunt

Постановка задачи:

Имеется два слоя. Между ними должен находится просто текст (не в слое!! а просто текст).

Пример

<div id='a'></div>текст<div id='b'></div>

Вопрос:

Как сделать так чтобы вся эта конструкция находилась в одной строке и слой 'b' не переносился на новую строку?

Share this post


Link to post
Share on other sites
Guest comhunt
<div id='a' style="float:left;"></div>текст<div id='b'></div>

например так

Данный способ с заданием у одного или у двух DIVов стиля style="float:left;" Не работает! второй DIV переносится таки на новую строку...

Share this post


Link to post
Share on other sites
Guest comhunt
Или сделав DIV встроенными элементами (display: inline)

Спасибо! :D а вот этот вариант работает!

Share this post


Link to post
Share on other sites

гы :D всегда делал так как написал выше (если честно то про display: inline не знал....), все работало. щас начал проверять заметил что между дивами есть еще текст) тогда можно сделать что то типа

<div id='a' style="float:left;"></div>текст<div id='b' style="float:right;"></div>

но все равно способ Влада лучше

Share this post


Link to post
Share on other sites
Guest comhunt
Или сделав DIV встроенными элементами (display: inline)

Попытался усложнить задачу:

Вставил внутрь DIV-ов таблицу

<DIV style="DISPLAY: inline"><table align=left><tr><td>asd</td></tr></table></DIV>ТЕКСТТЕКСТТЕКСТ

<DIV style="DISPLAY: inline"><table align=left><tr><td>qwe</td></tr></table></DIV>

И опять второй DIV убежал на новую строку :D

Может в таблице надо что-то прописать или задать другие стили у DIVов?

Уже какие сочитание не перепробовал и ничего не приводит к заданной цели.

Share this post


Link to post
Share on other sites

честно говоря, inline врятли вам поможет.

покажите, полажуйста, макет (или нарисуйте схематично) с задачей что именно Вам надо.

Share this post


Link to post
Share on other sites

Инлайн к таблицам применять это не усложнение, а моветон говоря простым языком. Говоря же языком научным - чушь получается.

Share this post


Link to post
Share on other sites

В продолжение этой темы. А как убрать расстояние между дивом-тесктом-дивом. Всё инлайном и между ними есть отступ. Margin и padding 0px;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>testpage</title>
<style>
* {
padding:0px;
margin:0px; }
</style>
</head>
<body>

<div id="a" style="background-color:#CCCCCC; display:inline; border:1px solid green;">a</div>
<a href="#" style="background-color:#999999; border:1px solid red;">hello hello hello</a>
<div id="b" style="background-color:#CCCCCC; display:inline; border:1px solid blue;">b</div>

</body>
</html>

Share this post


Link to post
Share on other sites

А нельзя вместо div использовать span? Тогда мороки меньше гораздо.Хотя сторонники разметки дивами меня щас закидают помидорами :D

Второй див может сбегать на новую строку из-за того что общая ширина элементов больше ширины окна и они просто не помещаются в одну строку.

Share this post


Link to post
Share on other sites

2happyproff, если проблема в ИЕ, тогда font-size: 0;

2Ogalig, использовать span для разметки - ббррр, для этого есть div.

видимо автору надо построить обычный макет на флотах.. или меню на флотах...

только он не может этого объяснить.

Share this post


Link to post
Share on other sites
2happyproff, если проблема в ИЕ, тогда font-size: 0;

проблема была в ff3 & chrome, остальных даже не проверял, но решилось через font-size:0;

А основная проблема display:inline это потеря элементом блочных свойств, как следствие игнорирование им, к примеру, widht и height. Из-за этого невозможно оформить так к примеру два дива, в левом меню, в правом контент без использования каких то еще дивов или таблиц, что очень печально.

"Используй float!" скажете вы, но и здесь есть проблема.

К примеру:

Есть меню и контент, и есть футер. А еще есть желание сверстать нормальный макет, без таблиц и лишних дивов и прочего.

Если для меню и контента использовать float, то блок, находящийся ниже (футер) будет позиционироваться не от нижнего края меню или контента, а от их верхнего.

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

UPD: сейчас порылся еще.

display:table,inline-table, inline-block как раз решают задачу, но поддерживаются не всеми браузерами. По справочнику на сайте inline-block поддерживается всеми, кроме ff1, ff2. Ладно, фиг с ним ff1, но ff2 поддерживать нужно...

Edited by happyproff

Share this post


Link to post
Share on other sites
Guest comhunt

Ребята, тут у меня задача сложнее чем кажется... :rolleyes:

Дело в том что у меня нет как такогового жесткого макета страницы.

Я пишу специализированный визивиг редактор математических формул аля микрософт ворд экьюэейшен.

И пользователь щелкая на иконки вставялет внутрь формы редактирвоания ту или иную формулу, вот какждая из которых и будет находится в DIVе со своим ID а между ними должен быть текст.

именно поэтому стили у всех дивов должны быть заданы одни и те же, так как я не знаю в какой последовательности юзер будет вставлть формулу, а где между ними писать текст - знаки + - или просто слова!

Вот такие вот дела...

Интересная задачка?..

Share this post


Link to post
Share on other sites
Guest comhunt
А нельзя вместо div использовать span? Тогда мороки меньше гораздо.Хотя сторонники разметки дивами меня щас закидают помидорами :rolleyes:

Второй див может сбегать на новую строку из-за того что общая ширина элементов больше ширины окна и они просто не помещаются в одну строку.

В принципе то можно. если честно мне уже не до симантики кода... :P

Лишь бы пользователь вбивал формулы правильно (см. мое сообщение в конце где я расписал постановку задачи)

Если использовать span то возникают проблемы со вложенными формулами, т.е. например когда в степень вы вставляете подформулу любую - все разъезжается непойми куда.... :P. А вот DIV-ы работают четко! все вставляется и отображается как нужно. вот только бы эти переносы на новую строку убрать любой ценой... а то формулы получаются косые..

типа такого:

2

X +

Y

Share this post


Link to post
Share on other sites
В 10.09.2008 в 08:38, Гость comhunt сказал:

Ребята, тут у меня задача сложнее чем кажется... :rolleyes:

Дело в том что у меня нет как такогового жесткого макета страницы.

Я пишу специализированный визивиг редактор математических формул аля микрософт ворд экьюэейшен.

И пользователь щелкая на иконки вставялет внутрь формы редактирвоания ту или иную формулу, вот какждая из которых и будет находится в DIVе со своим ID а между ними должен быть текст.

именно поэтому стили у всех дивов должны быть заданы одни и те же, так как я не знаю в какой последовательности юзер будет вставлть формулу, а где между ними писать текст - знаки + - или просто слова!

Вот такие вот дела...

Интересная задачка?..

задай всем трём блокам float:left; width: примерно 30% и паддинги рассчитай

http://codepen.io/JuliJulia/pen/wWdjXR

Edited by Джулия

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Member Statistics

    46,367
    Total Members
    3,128
    Most Online
    EugeneWebdev
    Newest Member
    EugeneWebdev
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.



  • Спрашивают сейчас

  • Пишут сейчас

    • Когда есть с кем, и есть куда, хожу на настольный теннис. Когда два раза в неделю, а когда и два раза в месяц. Сейчас в универе, где мы играли, отпуска, а другие места или ужасные (плиточный пол, например), или рано закрываются. Самая проблема — это найти себе напарника своего уровня, готового регулярно заниматься. Энтузиазм почему-то есть только у тех, кто ещё только учится ракетку держать, а я держать уже могу, мне надо играть учиться.
    • Увеличилась. Не 1000 долларов, конечно, и в рублях, но семье есть, что покушать. Меня держит то, что я больше ничего не умею. Продавцом в супермаркете я не выдержу, с людьми взаимодействовать вообще не люблю, у меня для этого менеджер, с которым я тоже не люблю взаимодействовать. По образованию мне положено работать на заводе, но нас в универе не учили ничему, что помогло бы сразу пойти и работать, дали только некоторые теоретические азы, которые я давно забыл. А для качественной работы, я считаю, нужно иметь не азы, а понимание сути происходящего. Лично я вообще не научился понимать, зачем в цепи, скажем, резистор стоит, или где его нужно поставить и зачем. Особенно, когда нам начинали рассказывать, и у каждого резистора по 2-3 назначения, эдак поставишь его куда-нибудь, а он аукнется смещением постоянного напряжения где-то в другом конце схемы.
      Новые фреймворки, можно сказать, не учу, хотя надо бы, без них я работу сменить не смогу, если приспичит, но у меня не остаётся моральных сил после работы ещё что-то учить. Я даже на велосипеде ездить перестал.
      В программировании у меня, к сожалению, тоже азы с некоторой специализацией в вёрстке. Я не знаю многих тонкостей, и никогда, например, не углублялся в такие темы, где понадобились бы Reflection в PHP. Или, например, я люблю использовать SQL-запросы вместо ORM, потому что польза ORM для меня не пересиливает их многословность и косноязычность. Я, конечно, понимаю, что если следовать принятым стандартам, то потом легче дорабатывать код, но я пришёл в разработку из домашних проектиков, и так и не научился наслаивать абстракции ради стандартов. А, скажем, вебпак только позавчера стал поковыривать, чтобы понимать, что в нём вообще происходит, а то он сейчас везде. Настолько некрупные проекты у меня всегда были, что мне хватало отдельных JS-файликов.

      И вообще, когда я с условного Delphi переходил на веб, то меня привлекало то, что не нужно ничего компилировать, не нужно ничего ставить, можно лишь запустить блокнот, а браузер уже есть на любом компьютере. Теперь этого ничего уже нет, постоянно то npm, то composer, сборка vue, сборка scss, когда без vue. У питонщиков и ноды, так вообще, веб-сервер является частью проекта, и чтобы что-то исправить, надо его перезапускать, а не как в PHP, просто файлик подправить. Веб перестал быть простым.
    • Всем привет. Слышал советы, что вместо пикселей желательно использовать rem для задания размеров. Решил, в качестве эксперимента, попробовать задать для html определённый размер в пикселях, а дальше везде использовать уже rem. И вроде всё нормально, даже очень удобно. Но под конец решил я уменьшить масштаб страницы и вот тут появились проблемы. Если использовать такой код: html { font-size: 10px; } .box { background: red; width: 100px; height: 400px; } То по итогу всё нормально, сколько масштаб не уменьшай, результат всё те же 400px. Но стоило изменить единицы измерения в высоте: html { font-size: 10px; } .box { background: red; width: 100px; height: 40rem; } И вот тут уже появляется проблема. При уменьшении масштаба страницы до 50% к размеру высоты: в Google Chrome и Yandex браузерах добавляется дополнительные 80px, в Opera итоговая высота элемента увеличивается до 960 px. А вот в Firefox всё нормально и по итогу выходят те же 400px. Подскажите в чём тут проблема? Это особенности rem или браузеров на основе WebKit? И вообще, я понимаю, что многие советуют явно высоту элементов не задавать, но если это необходимо, то какие единицы измерения посоветуете для этого использовать?
  • Popular Contributors