Заморозить div, который сдвигается от текста динамического размера

Question

Заморозить div, который сдвигается от текста динамического размера

0

В приведенном ниже коде у меня есть 3 divs, где 1-й и 3-й divs - это таблицы, которые заполняются текстом разной длины (определяется пользователем) в представлении пользователя. Второй div - это изображение. Когда пользователь отправляет и текст заполняется в таблицы, центральное изображение (2-й div) перемещается в зависимости от длины текста. Например, если самое длинное слово из обеих таблиц находится в левой таблице, изображение будет сдвигаться вправо вместе с правой таблицей. Если самое длинное слово в каждой таблице одинаковой длины, ничего не сдвинется.

Какое положение CSS можно использовать для обеспечения того, чтобы 2-й div оставался центрированным независимо от длины текста в divs по обе стороны от него? По сути, я хочу, чтобы 1-й div расширялся влево, а третий div расширялся вправо, так что любое изменение длины <span> не будет перемещать центрированное изображение вообще

<div class="text_tables" id="left_table">
    <table>
        <tr>
            <td>
                <span class="output render" id="text1"></span>
            </td>
        </tr>
    </table>
</div>
<div class="text_tables">
    <img id="img1" src="{{ url_for('static', filename='img/img.png') }}">
</div>
<div class="text_tables" id="right_table">
    <table>
        <tr>
            <td>
                <span class="output render" id="text6"></span>
            </td>
        </tr>
    </table>
</div>

metersk 18 фев. 2014, в 01:20

Источник

Теги:

html

css

css3

1 ответ

Ещё вопросы

TimSPQR · Answer 1 · 2014-02-18T02-43-00.000Z

Ну, в честь тех, кто говорит, что таблицы не должны использоваться для макета, я собрал немного FIDDLE с просто div.

Это тип поведения, который вы ищете?

HTML

<div class='holderdiv'>
  <div class='leftdiv'> asdfasdfasdf</div>
  <div class='centerdiv'></div>
  <div class='rightdiv'>ASDASDFASDFASDFASDF </div>
</div>

V 2.0

Хорошо, этот FIDDLE, похоже, делает многое из того, что вы хотите.

Я немного смущен тем, что вы хотите. Нужно ли нам разбирать все пробелы и выстраивать слова в одном столбце в любом крыле?

Предоставьте более подробную информацию, и я могу немного подтянуть ее.

К сожалению, не совсем. Независимо от длины слов на обеих сторонах изображения, картинка всегда должна оставаться в центре. В вашей скрипке текст правого div, который длиннее, должен переместиться на вторую строку вместо того, чтобы толкать фотографию влево.
Как вы хотите ввести текст? Прямо в обе стороны с текстовой областью? Или из поля ввода / текстовой области, которое затем заполняет обе стороны?
Последнее - у меня есть область ввода ниже всего этого. На входе представить текст заполняет область по обе стороны изображения.