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,514
    Total Members
    3,128
    Most Online
    e1pavlovitch
    Newest Member
    e1pavlovitch
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.