CSS-макет с двумя столбцами без указания правильного столбца - PullRequest
Новая
       6

CSS-макет с двумя столбцами без указания правильного столбца

1 голос
/ 20 июля 2010

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

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

<html>
 <head>
  <style type="text/css">
    #left, #right {
     border: solid 1px #000000;
    }

    #left {
     float: left;
     width: 10%;
    }

    #right {
     float: left;
    }
  </style>
 </head>
 <body>
  <div id="left">I'm left</div>
  <div id="right">
   <p>I'm right.</p>
   <p>There is a bit more text here.</p>
   <p>Let's assume for a moment, that there is so much text here,
   that it cannot possibly fit on one line on any kind of monitor.
   For this purpose, I have to write a bit of nonsense, but there is
   always enough nonsense for this kind of task in the world.
   I could always ask a politician, I'm sure there isn't even a single
   cinema canvas in the world that could display such nonsense in a
   single line.
  </div>
 </body>
</html>

Обратите внимание, что если я удалю особенно длинный абзац, правый столбец будет достаточно маленьким, чтобы поместиться в одну строку, и он будет работать.

Есть ли способ, чтобы правый столбец занимал оставшееся место?

Ответы [ 3 ]

1 голос
/ 20 июля 2010

Хитрость заключается в том, чтобы поместить переполнение: скрытое в правую панель: 

#left, #right {
       border: solid 1px #000000;
}

#left {
      float: left;
      width: 10%;
}

#right {
       overflow: hidden;
}
0 голосов
/ 20 июля 2010

Я считаю, что то, что у вас уже есть, отвечает вашим потребностям, если вы откроете его в IE. Но для Firefox установите свойство display этих двух div в table. Обратите внимание, что это значение не определено в IE. 

#left, #right {
    border: solid 1px #000000;
    display: table;
}
0 голосов
/ 20 июля 2010

Это сделает для вас: 

#left {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
}

#right {
    padding-left: 200px;
}
...