В CSS, как я могу получить левый столбец фиксированной ширины с правой таблицей, которая использует оставшуюся ширину? - PullRequest
Новая
       14

В CSS, как я могу получить левый столбец фиксированной ширины с правой таблицей, которая использует оставшуюся ширину?

37 голосов
/ 22 января 2009

Итак, я пытался работать с чистым CSS, евангелием «никогда не используй таблицы для макета». Но после невероятного количества боли и страдания я почти готов сдаться. Я готов приложить некоторые усилия для достижения цели в CSS, не поймите меня неправильно. Но когда кажется, что некоторые из самых простых вещей, которые можно сделать с помощью таблиц макета, совершенно невозможны в CSS, мне все равно, действительно ли концептуальная чистота начинает терпеть поражения.

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

Вопрос заключается в следующем: есть ли любой способ , использующий макет чистого CSS, чтобы слева был столбец фиксированной ширины, а справа от него - таблица данных и таблица данных аккуратно занимает оставшуюся часть свободного места? То есть тот же макет, который легко достижим при наличии таблицы макетов из двух ячеек с шириной 100% и фиксированной шириной в левой ячейке?

Ответы [ 10 ]

47 голосов
/ 22 января 2009 
<div style="width: 200px;background-color: #FFFFCC; float: left;">
Left column
</div>

<div style="margin-left: 200px; background-color: #CCFFFF">
Right column
</div>

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

11 голосов
/ 22 января 2009

Я думаю, это то, что вы ищете: 

<table style='width: 100%;'>
  <tr>
    <td style='width: 200px;'></td>
    <td></td>
  </tr>
</table>

Спасибо, позже. = Р

(Я, очевидно, шучу .... вроде ...)

10 голосов
/ 22 января 2009

Это это , что вы ищете? 

body {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  height: 100%;
  max-height: 100%;
}
#framecontent {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  /*Width of frame div*/
  height: 100%;
  overflow: hidden;
  /*Disable scrollbars. Set to "scroll" to enable*/
  background: navy;
  color: white;
}
#maincontent {
  position: fixed;
  top: 0;
  left: 200px;
  /*Set left value to WidthOfFrameDiv*/
  right: 0;
  bottom: 0;
  overflow: auto;
  background: #fff;
}
.innertube {
  margin: 15px;
  /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body {
  /*IE6 hack*/
  padding: 0 0 0 200px;
  /*Set value to (0 0 0 WidthOfFrameDiv)*/
}
* html #maincontent {
  /*IE6 hack*/
  height: 100%;
  width: 100%;
}
<div id="framecontent">
    <div class="innertube">

      <h1>CSS Left Frame Layout</h1>
      <h3>Sample text here</h3>

    </div>
  </div>


  <div id="maincontent">
    <div class="innertube">

      <h1>Dynamic Drive CSS Library</h1>
      <p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a>
      </p>

    </div>
  </div>

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

5 голосов
/ 22 января 2009

Во-первых, я бы порекомендовал книги Эрика Мейера по CSS, а также ссылку CSS в Интернете: A List Apart . Я широко использую CSS в своей работе и думаю, что с этим справился довольно хорошо.

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

Помните: вам не платят за CSS - вам платят за написание работающего программного обеспечения.

3 голосов
/ 27 мая 2015

Чтобы держать этот вопрос в актуальном состоянии, вот 5 способов добиться того же, используя CSS2 и CSS3.

Пример 1: Floats & Margin

Так было сделано годами: просто и эффективно. 

#example1 .fixedColumn {
    width: 180px;
    float: left;
    background-color: #FCC;
    padding: 10px;
}
#example1 .flexibleColumn {
    margin-left: 200px;
    background-color: #CFF;
    padding: 10px;
}
<div id="example1">

    <div class="fixedColumn">
        Fixed Column
    </div>
    <div class="flexibleColumn">
        Flexible Column
    </div>
    
</div>

Пример 2: CSS calc ();

calc() работает с IE9 и выше, хотя поддержка некоторых версий браузера Android немного ненормальная: http://caniuse.com/#feat=calc

#example2.calc {
    overflow: hidden;
}
#example2.calc .fixedColumn {
    width: 180px;
    float: left;   
    background-color: #FCC;
    padding: 10px; 
}
#example2.calc .flexibleColumn {
    width: calc(100% - 220px); /*200px for the fixed column and 20 for the left and right padding */
    float: left;  
    background-color: #CFF;
    padding: 10px;
}
<div id="example2" class="calc">
    
    <div class="fixedColumn">
        Fixed Column
    </div>
    <div class="flexibleColumn">
        Flexible Column
    </div>
    
</div>

Пример 3: отображение CSS в виде таблицы 

#example3.table {
    display: table;   
    width: 100%;
}
#example3.table .fixedColumn {
    width: 180px;
    display: table-cell;   
    background-color: #FCC;
    padding: 10px;   
}
#example3.table .flexibleColumn {    
    display: table-cell; 
    background-color: #CFF;
    padding: 10px;  
}
<div id="example3" class="table">
    
    <div class="fixedColumn">
        Fixed Column
    </div>
    <div class="flexibleColumn">
        Flexible Column
    </div>
    
</div>

Пример 4: CSS3 Flexbox

Flexbox имеет удивительно хорошую поддержку во всех браузерах: http://caniuse.com/#search=flex

#example4.flex {
    display: flex;
}
#example4.flex .fixedColumn {
    width: 180px;
    background-color: #FCC;
    padding: 10px;  
}
#example4.flex .flexibleColumn {
    flex: 1 100%;
    flex-basis: auto;
    background-color: #CFF;
    padding: 10px; 
}
<div id="example4" class="flex">
    
    <div class="fixedColumn">
        Fixed Column
    </div>
    <div class="flexibleColumn">
        Flexible Column
    </div>
    
</div>

Пример 5: CSS3 Grid

На данный момент единственными браузерами, поддерживающими реализацию CSS3 grid, являются IE10, IE11 и Edge (следовательно, браузерные префиксы -ms-), поэтому убедитесь, что вы просматриваете это в одном из тех случаев, иначе он не будет работать правильно ,

РЕДАКТИРОВАТЬ Я включил здесь экспериментальную спецификацию Chrome, которую вы можете просмотреть, включив экспериментальные функции в Chrome, которые подробно описаны здесь .

http://caniuse.com/#search=grid

#example5.grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 200px 1fr;
    -ms-grid-rows: auto;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto;
}
#example5.grid .fixedColumn {
    -ms-grid-column: 1;
    background-color: #FCC;
    padding: 10px;
}
#example5.grid .flexibleColumn {
    -ms-grid-column: 2;
    background-color: #CFF;
    padding: 10px;
}
<div id="example5" class="grid">
    
    <div class="fixedColumn">
        Fixed Column
    </div>
    <div class="flexibleColumn">
        Flexible Column
    </div>
    
</div>

Вот кодекс, который включает все 5 техник:

2 столбца (1 фиксированный, 1 согнутый) 5 различными способами!

1 голос
/ 22 января 2009

Возможно, вы захотите попробовать это:

http://www.alistapart.com/stories/practicalcss/

http://www.w3.org/2002/03/csslayout-howto

И вот почему:

http://en.wikipedia.org/wiki/Tableless_web_design

http://davespicks.com/essays/notables.html

Дополнительные инструкции: 

    div.row {
      clear: both;
      padding-top: 10px;
    }

    div.row span.label {
      float: left;
      width: 100px;
      text-align: right;
    }

    div.row span.formw {
      float: right;
      width: 335px;
      text-align: left;
    }


    <div style="width: 350px; background-color: #cc9;
      border: 1px dotted #333; padding: 5px;
      margin: 0px auto";>
      <form>
        <div class="row">
          <span class="label">Name:</span><span
            class="formw"><input type="text" size="25" /></span>
        </div>
        <div class="row">
          <span class="label">Age:</span><span
            class="formw"><input type="text" size="25" /></span>
        </div>
        <div class="row">
          <span class="label">Shoe size:</span><span
            class="formw"><input type="text" size="25" /></span>
        </div>
        <div class="row">
          <span class="label">Comments:</span><span
              class="formw">
            <textarea cols="25" rows="8">
            Go ahead - write something...
            </textarea>
          </span>
        </div>
        <div class="spacer">
          &nbsp;
        </div>
      </form>
    </div>
1 голос
/ 22 января 2009

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

После борьбы с CSS-войной я пришел к выводу, что «чистый» находится в поле зрения смотрящего и перешел к более «подходу« давайте просто использовать то, что работает »».

Используйте CSS для того, для чего он хорош: чтобы вещи выглядели красиво. Используйте DIV и SPAN, когда можете. Но если вы проведете день, пытаясь выстроить вещи в соответствие всем различным браузерным вариантам, то добавьте туда таблицу и продолжайте. Не волнуйтесь, вопреки тому, что большинство людей думают, щенок на самом деле не умрет.

1 голос
/ 22 января 2009

Примерно так: 

<div style="position: relative; width: 100%">
    <div style="position: absolute; left: 0; top: 0; width: 200px">
        left column
    </div>
    <div style="position: absolute; left: 200px; top: 0">
         other stuff
    </div>
</div>

Конечно, вы, вероятно, должны поместить стили в отдельную таблицу стилей, а не в строку. А один столбец с фиксированной шириной слева довольно прост, но иногда я вижу другие макеты, которые можно легко сделать с помощью таблиц, но, насколько я знаю, с CSS это чертовски сложно.

0 голосов
/ 22 января 2009

Как говорит Спарр, есть CSS, который конкретно отвечает этому требованию, потому что на самом деле невозможно сделать это любым другим способом без различных, возможно, неприемлемых компромиссов, а это display:table, display:table-cell и т. Д.

К сожалению, Internet Explorer до Internet Explorer 8 не поддерживает эти режимы отображения, поэтому проблема не в CSS, а в том, что браузеры (на самом деле Internet Explorer, остальные в порядке) не поддерживают адекватно CSS.

Хорошая новость заключается в том, что это меняется, и со временем у нас будет правильное решение CSS. А пока выберите один из компромиссов в других ответах.

0 голосов
/ 22 января 2009

Почти наверняка есть ответ, который включает применение display: table и display: table-cell к рассматриваемым элементам. Что сказать ... нет.

...