Jump to content
  • 0

Два inline div'а, дополнение до ширины ячейки


unkalien
 Share

Question

Здравствуйте!

Возник следующий вопрос по верстке. Есть ячейка таблицы, в неё выводится сгенерированнный в PHP текст (выделен синим). А после него должен выводится ещё кусок текста, начиная с той же строки (выделено сиреневым).

1.jpg

2.jpg

В принципе все понятно, нужны два div'а с display: inline, но сиреневый блок должен быть редактируем пользователем, т.е. contenteditable=true. Далее он с использованием аякса отправляется на сервер. Проблема возникает, когда блок пустой - тогда пользователю просто некуда тыкнуть мышкой, чтобы его создать.

Идеальным решением было бы растянуть его до конца ячейки, т.е. нечто вроде такого:

3.jpg

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

4.jpg

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

Но как растянуть на всю ширину ячейки div со стилем inline, я не понимаю. А если без стиля, то он переносится на новую строку, что недопустимо. Как это сделать?

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

могу посоветовать в сереневом блоке по умолчанию держать пробел:

1. если блок пустой будет куда ткнуть для редактирования

2. между последним словом не редактируемого блока и первым словом редоктируемого само собой напрашивается пробел

Link to comment
Share on other sites

  • 0
В принципе все понятно, нужны два div'а с display: inline,

а что использовать <span> не комильфо?

растянуть не поулчится, а вот min-width тут вполне подойдет.

Нет, не подойдёт. min-width не применяется к инлайнам, а display: inline-block здесь применять тоже нельзя, иначе текст не будет продолжаться и переходить на другую строку, как нужно.

unkalien

А можно ли делать так, чтобы, скриптами проверялось, если блок пуст, то ставить ему впереди пробельный знак, при чём вот такой " "?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy