левый div + правый div + центр div = 100% ширины. Как реализовать? - PullRequest
Новая
       14

левый div + правый div + центр div = 100% ширины. Как реализовать?

4 голосов
/ 05 июля 2010

У меня есть три div и один основной div: 

<div id="container" style="width:100%;">
    <div id="left" style="width:201px; float:left;">
     .... 
    </div>
    <div id="centre" style="float:left;">
     ....   
    </div>
    <div id="right" style="width:135px; float:right;">
     ....
    </div>
</div>

Как можно сделать центр деление максимальной ширины, чтобы containerDivWidth = leftDivWidth + rightDivwidth + centreDivWidth;

Ответы [ 6 ]

2 голосов
/ 06 июля 2010

Это позволит вам иметь фиксированные правый и левый столбцы и гибкую центральную часть:

CSS 

<style type="text/css">
  #left {
    float: left;
    width: 201px;
    border: 1px solid red;
  }

  #centre {
    display: block;
    overflow: auto;
    border: 1px solid green;
  }

  #right {
    float: right;
    width: 135px;
    border: 1px solid blue;
  }
</style>

HTML 

<div id="container" style="width:100%;"> 
  <div id="left">Left</div>
  <div id="right">Right</div>
  <div id="centre">Middle</div>
</div>
2 голосов
/ 06 июля 2010

Я считаю, что вы пытаетесь достичь макета «Святой Грааль».

Существует отличная статья List Apart об этом Макете, вы должны проверить ее:

http://www.alistapart.com/articles/holygrail

0 голосов
/ 05 июля 2010
0 голосов
/ 05 июля 2010

с небольшим javascript, его идеальным / сначала добавить jquery для селекторов и т. Д. 

<script type="text/javascript" src="js/jquery.js"></script>

и часть javascript / 

$(document).ready(function(){
    $('#centre').css("width",$(window).width()-336)

    $(window).resize(function() {
        $('#centre').css("width",$(window).width()-336)
    });
});
0 голосов
/ 05 июля 2010

То, что я ранее сделал, это установил centre, чтобы иметь левое поле 201px и правое поле 135px. Установите его в относительное положение (вместо того, чтобы плавать), и тогда он должен заполнить все оставшееся пространство между левым и правым столбцами.

Я не могу найти один из моих старых примеров кода, так что это лучшее, что я могу сделать на данный момент. Надеюсь, поможет!

0 голосов
/ 05 июля 2010

Вы не можете смешивать относительную и фиксированную ширину, что, на мой взгляд, является недостатком в CSS.

Лучшее, что вы можете сделать, это что-то вроде: 

<div id="container" style="width:100%;"> 
    <div id="left" style="width:20%; float:left;"> 
     ....  
    </div> 
    <div id="centre" style="width:65%; float:left;"> 
     ....    
    </div> 
    <div id="right" style="width:15%; float:right;"> 
     .... 
    </div> 
</div>

Я буду очень счастливесли я ошибаюсь.

...