Подтвердить что ты не робот

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

<div style="width: 200px;background-color: #FFFFCC; float: left;">
Left column
</div>

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

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

Ответ 2

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

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

Поздравляю меня. = P

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

Ответ 3

Является этот, что вы ищете?

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>

Ответ 4

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

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

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

Ответ 5

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

 

Пример 1: Поплавки и маржа

Вот как это делается в течение многих лет: просто и эффективно.

#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>

Ответ 6

Что-то вроде этого:

<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.

Ответ 7

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

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

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

Ответ 8

Вы можете попробовать:

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

Подробнее HowTOs:

    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>

Ответ 9

Существует почти наверняка ответ, который включает применение display: table и display: table-cell к рассматриваемым элементам. То есть... нет.

Ответ 10

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

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

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