Отзывчивая таблица с статическим столбцом?

Мне нужно реализовать гибкий дизайн таблицы, который работает как можно большим количеством браузеров. Две оставшиеся ячейки (слева/в середине) будут иметь статическую ширину, в то время как мне нужен правый div, чтобы иметь динамическую ширину, основанную на размере текущего окна.Отзывчивая таблица с статическим столбцом?

Это как разметка выглядит следующим образом:

<div class="wrapper"> 
    <div class="leftWrapper"> 
     <div class="left">left</div> 
     <div class="mid">mid</div> 
    </div> 
    <div class="right">Lorem ipsum dolor sit amet, facilisi velit justo non. Pretium vestibulum nibh nonummy et a libero. Aptent consequat suscipit ridiculus leo pellentesque tempus, suspendisse pretium quis turpis. Euismod facilisi congue ab. Pretium ultricies non aliquam mi, cras sint, pede elit ligula aliquam in scelerisque ultricies, vitae dictum tincidunt sit, torquent eu et eros suspendisse. Voluptate nec curabitur et at nam non, diam vel, lorem nibh id condimentum a, laborum ornare, pede sem mattis. Numquam magna non metus sit fringilla, ligula quis cras, in lorem, praesent eros volutpat nisl vehicula tellus, egestas nullam. Pede aliquam donec.</div> 
</div>

http://jsfiddle.net/mmZeN/.

Как разрешить правую ячейку оставаться на той же линии, что и левая и средняя, без использования дисплея: табличная ячейка и в то же время перерезать ее по ширине в зависимости от ширины луковицы?

источник

2013-04-23 Banshee

Я сделал это с полного нуля, увидеть, если это полезно для вас

Demo

<div class="wrapper"> 
    <div class="left"></div> 
    <div class="center"></div> 
    <div class="right"></div> 
</div> 

<style> 
.left { 
    float: left; 
    width: 200px; 
    background-color:#0f0; 
    min-height: 200px; 
} 

.center { 
    float: left; 
    width: 120px; 
    background-color:#000; 
    min-height: 200px; 
} 
.right { 
    height: 200px; 
    background-color: #f0f; 
    margin-left: 320px; 
} 
</style>

источник

2013-04-23 12:05:41

Я сделал это решение на основе вашего: http://jsfiddle.net/AAWtY/, похоже, работает, но будет ли он работать во всех браузерах? Даже мобильный? Кроме того, почему у вас есть 317px вместо 320px? – Banshee

@SnowJim Испытывал другие размеры, так как я их плавал, мой правый блок показывал внизу, а позже забыл изменить -317 .. и да, он должен поддерживать –

Если у вас есть статические значения для левого и среднего, вы можете указать css и дать другому столбцу значение процента. Это должно работать в этом случае.

обновление: Получить точки с текущем заполнителем (может быть ДИВЫМ), вычесть левые и средняя ширина столбца, то остается шириной например: Xpx Xpx/общая ширина контейнера х 100 этого значения может дать как процент ,

источник

2013-04-23 12:03:22

Да, но как это сделать? 100% помещает правый столбец во второй ряд? – Banshee

Не плавать .right элемент и дать ему перевес ту же ширину, что и .leftWrapper

Это красота поплавков.

обновлено demo athttp://jsfiddle.net/mmZeN/2/

источник

2013-04-23 12:09:11

Отзывчивая таблица с статическим столбцом?

ответ

Смежные вопросы