Стол рядом с плавающим элементом

0

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

(Поскольку все решения до сих пор являются обходными решениями, я хотел бы подчеркнуть свою точку зрения: плавающий элемент не имеет фиксированного размера. Поэтому все решения с margin-right, width: x% или witdh: x px будут либо покидать экран области неиспользуемые или вырезать/перезаписать элемент.)

Является ли это возможным?

http://jsfiddle.net/GunnarB/3ZYq8/

select {
    float:right;
}
#wrapper {
    background-color:gray;
    padding:5px;
    float:left;
}
#wrapper table {
    table-layout:fixed;
    width: 100%;
    background-color:#00FFFF;
}
td {
    padding:5px;
    border: 1px solid white;
    border-collapse:collapse;
}

<select size="3">
<option>DB entries with unknown width</option>
<option>h--p://www.google.com</option>
<option>h--p://www.msn.com</option>
</select>    
<div id="wrapper">
<table>
        <tr>
            <td>left</td>
            <td>some text</td>
        </tr>
        <tr>
            <td>left</td>
            <td></td>
        </tr>
        <tr>
            <td>left</td>
            <td>NG</td>
        </tr>
    </table>
</div>
  • 0
    Я не думаю, что то, что вы просите (без объявления ширины со 100% шириной на изображении и div, который заполняет остальное пространство), может быть сделано только с помощью CSS. Это не должно быть слишком плохо, чтобы сделать это в javascript / jQuery, если вы готовы пойти по этому пути.
  • 0
    Вот чего я боялся. Я просто думал, что если у вас есть обычный текст вместо таблицы, то текст оборачивается, когда места больше нет. Поэтому браузер должен рассчитать ширину оставшегося пространства. Должен использоваться как ширина таблицы (автоматически, а не через javascript).
Показать ещё 1 комментарий
Теги:
html-table

4 ответа

3

Вы можете указать ширину изображения и div.

Обновите свой CSS так:

img {
    float:right;
    width: 40%;
}
#wrapper {
    background-color:gray;
    padding:5px;
    float:left;
    width: 50%;
}

Это должно сработать!

Поделиться
  • 0
    Хотя это возможно, если изображение использует только 10% экрана, я бы потратил 30%. Это не лучшее решение.
0

Здесь другой подход, использующий только CSS. HTML идентичен оригиналу, поэтому я не буду приводить его здесь снова. В CSS есть всего несколько изменений. Ключ здесь состоит в том, чтобы не плавать контейнер для таблицы и применять overflow: hidden к его оболочке.

select {
    float:right;
}
#wrapper {
    background-color:gray;
    padding:5px;
    width: auto;
    overflow: hidden;
}
#wrapper table {
    table-layout:fixed;
    width: 100%;
    background-color:#00FFFF;
}
td {
    padding:5px;
    border: 1px solid white;
    border-collapse:collapse;
}

Вероятно, вы захотите инкапсулировать все это (select and table) в оболочку div чтобы вы могли контролировать, как вы хотите использовать его в контексте на своей странице.

Поделиться
  • 0
    Это на самом деле работает. Мне нужно посмотреть на страницу, чтобы увидеть, что она делает с остальными, так как она больше не плавает.
  • 0
    @GunnarBernstein Вам может понадобиться обернуть все это выше в div который может «защитить» остальную часть страницы.
Показать ещё 1 комментарий
0

вы должны сделать вот так:

http://jsfiddle.net/ZppLh/

HTML

<img src="whatever">
<div id="wrapper">
 <table>
  <tbody>
   <tr>
    <td>left</td>
    <td>some text</td>
   </tr>
   <tr>
    <td>left</td>
    <td></td>
   </tr>
   <tr>
    <td>left</td>
    <td>NG</td>
   </tr>
  </tbody>
 </table>
</div>

CSS

img {
    float:right;
}
#wrapper {
    background-color:gray;
    right: 285px;
    position: absolute;
}
#wrapper table {
    table-layout:fixed;
    width: 100%;
    background-color:#00FFFF;
}
td {
    padding:5px;
    border: 1px solid white;
    border-collapse:collapse;
}
Поделиться
  • 0
    Это решение не будет работать для изображений размером более 285 пикселей.
  • 0
    Я думал, что идея плавающих элементов в том, что контент автоматически плавает вокруг него. Определение фиксированного размера работает для этого изображения, но, как я уже писал, плавающий элемент имеет переменный размер.
Показать ещё 6 комментариев
0

Укажите ширину в #wrapper

#wrapper {
  background-color:gray;
  padding:5px;
  float:left;
  width: 50%;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/float

Поделиться
  • 0
    Если я использую фиксированные 50%, в чем смысл плавающих элементов?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню