Как это сделать: родительский элемент ширины жидкости, с дочерним элементом фиксированной ширины и ширины жидкости? - PullRequest
Новая
       29

Как это сделать: родительский элемент ширины жидкости, с дочерним элементом фиксированной ширины и ширины жидкости?

2 голосов
/ 14 марта 2012

Прежде чем я объясню, рассмотрим следующее ...

ПРИМЕР КОДА HTML: 

<div id="Body">
    <div id="Content">...</div>
    <div id="Panel">...</div
</div>

КОД CSS: 

#Body {
    min-width: 865px;
    width: 93%;
    max-width: 1785px;
}

#Panel {
    width: 250px;
    float: right;
}

#Content {
    float: left;
    min-width: 595px;
    width: /* This one needs to be fluid. So, what should I do? */;
    max-width: 1510px;
}

Как вы можете видеть, div 'Body' - это родительский элемент ширины флюида, о котором я говорил, с дочерним элементом фиксированной ширины div 'Panel' и div Content-width флюидной ширины - и это именно то, где я застрял.

Как мне определить ширину div 'Content'? Любые идеи приветствуются. Спасибо.

Ответы [ 2 ]

1 голос
/ 14 марта 2012

Сначала укажите #Panel div, а затем просто используйте его для #Content: 

#Content {
    margin-right: 250px;
}

jsFiddle Demo

Вот некоторыепростые рекомендации, чтобы сделать эту работу на вашем сайте.Для этого я использовал Chrome Developer Tools, и он отлично работает.

  • #Body @ style.css
    • overflow: hidden;
  • #Content @ custom.css
    • min-width: 595px;
    • width: 68%;
    • max-width: 1510px;
    • margin-right: 270px;
  • #Content @ style.css
    • width: 680px;
    • float: left;
0 голосов
/ 14 марта 2012

Исправление для этой проблемы: 

#Body {
    min-width: 865px;
    width: 93%;
    max-width: 1785px;
    position:relative; /* Added by me */
}

#Panel {
    width: 250px;
    /*float: right;*/
    position:absolute; /* Added */
    top:0; /* Added */
    right:0; /* Added */
}

#Content {
    float: left;
    min-width: 595px;
    width: 100%; /* Value added */
    max-width: 1510px;
    margin-right:250px; /* Added */
}

У меня все работало нормально.

...