Как создать HTML-контейнер, который будет заполнять всю доступную ширину между двумя плавающими элементами? - PullRequest
Новая
       21

Как создать HTML-контейнер, который будет заполнять всю доступную ширину между двумя плавающими элементами?

0 голосов
/ 03 августа 2010

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

 ----------                                                ---------- 
|          | Some text text text text text text text text |          |
|          | text (in a <p> element).                     |          |
| float:   |  ------------------------------------------  | float:   |
|   left;  | |      The container I want to create      | |   right; |
|          |  ------------------------------------------  |          |
|          | Some other text text text text text text tex |          |
 ----------  text text text text text text text text text |          |
text text text (in another <p> element).                  |          |
                                                           ----------

ширина каждого из двух плавающих элементов неизвестна и может варьироваться, поэтому мне приходится кодировать контейнер независимо от них (а также я не могу изменить их код).И я хочу иметь его левую и правую границы вдоль границ плавающих элементов.

Например, если я использую элемент div (с display: block), его левая и правая граница находятся под двумя плавающими элементами... Если я использую элемент таблицы (или div с display: table), он не будет заполнять всю доступную ширину, если в нем нет какой-либо строки полного текста ...

Могу поспорить, что естьпростое решение, но я просто не могу его найти!Спасибо за любую помощь!

Ответы [ 5 ]

1 голос
/ 03 августа 2010

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

<div id="LeftColumn" style="float: left; width: 20%;">
    <p>Left Column</p>
</div>
<div id="CenterColumn" style="margin: 0 25%;">
    <p>Some text text text text text text text text text (in a <p> element).</p>
    <div style="width: 100%; text-align:center;">
        <p>The container I want to create</p>
    </div>
    <p>Some text (in another <p> element).</p>
</div>
<div id="RightColumn" style="float: right; width: 20%;">
    <p>Right Column</p>
</div>
0 голосов
/ 04 мая 2014 
<div id="Main" style="margin: 0 25%;">
    <p>Hello</p>
</div>
<style type="text/css">
    #Main
    {
        width:1000;
        height:670;
        background-color:White;
        color:black;
    }
</style>
0 голосов
/ 04 августа 2010

Я понял! Хорошо, это своего рода хак, и он использует таблицу, но он работает на каждом браузере (даже IE6), и мне, возможно, удастся немного его почистить, теперь у меня все работает ...

Ключ в том, чтобы создать таблицу как минимум с двумя ячейками и установить ширину одной из них на 100%; таким образом, браузер будет отображать эту ячейку как можно большего размера, чтобы ее фактический отображаемый размер был как можно ближе к 100% всей таблицы. И теперь я могу положить то, что хочу, в эту клетку.

Вот соответствующий HTML-код: 

<div style="float:left;">...</div>
<div style="float:right;">...</div>
<p>Some text...</p>
<table>
    <tr>
        <td style="width:100%;">
            Some content
        </td>
        <td style="width:1px;"/>
    </tr>
</table>
<p>Some other text...</p>

Таким образом, контейнер будет отображаться правильно независимо от размера того, что находится в двух плавающих элементах div. И если пустая ячейка шириной 1px справа является проблемой, я всегда могу поставить другую слева, чтобы она была симметричной и менее раздражающей (но на самом деле, с нулевым интервалом в таблице и заполнение 0 в каждой ячейке, пустая ячейка шириной 1px фактически не видна ...).

Теперь я должен найти способ, если возможно, сделать все это немного чище (и, возможно, даже без использования элемента таблицы?).

0 голосов
/ 03 августа 2010

Это невозможно.Вот почему:

Свойство width может принимать любое из следующих значений:

  1. фиксированная длина
  2. в процентах
  3. inherit (=100%)
  4. auto (=100%-(margins+borders+paddings))

Ни одно из этих действий не будет работать с вашими предпосылками:

  1. вам нужно знать ширину страницы и ширину плавающих контейнеров
  2. вам нужно знать ширину плавающих контейнеров в процентах
  3. это не оставит плавающие контейнеры в покое
  4. вам нужно знать ширину плавающих контейнеров и соответственно установить поля
0 голосов
/ 03 августа 2010

На основании ответа @durilai (я считаю, что это решает проблему более точно, но это зависит от того, что вы действительно хотите сделать): 

<div style="float: left; width: 20%;">
    <p>Left Column</p>
</div>
<p>Some text text text text text text text text text (in a <p> element).</p>
<div style="margin: 0 25%;">
    <p>The container I want to create</p>
</div>
<p>Some text (in another <p> element).</p>
<div style="float: right; width: 20%;">
    <p>Right Column</p>
</div>

Это, в отличие от решения @durilais, будет вести себя как с обычными плавающими, когда текст "выше", чем плавающие. Он по-прежнему будет требовать, чтобы вы знали ширину поплавков, и он не будет вести себя правильно, когда самый внутренний <div> находится ниже двух поплавков, но это примерно как решение, которое вы можете получить.

...