В приведенном ниже коде у меня есть 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>
Ну, в честь тех, кто говорит, что таблицы не должны использоваться для макета, я собрал немного 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, похоже, делает многое из того, что вы хотите.
Я немного смущен тем, что вы хотите. Нужно ли нам разбирать все пробелы и выстраивать слова в одном столбце в любом крыле?
Предоставьте более подробную информацию, и я могу немного подтянуть ее.