В CSS, как я могу получить левую колонку с фиксированной шириной с правой таблицей, которая использует оставшуюся ширину?
Так что я пытался работать с чистым CSS, евангелием "никогда не используй таблицы для макета", которое у меня действительно есть. Но после невероятного количества боли и страданий я почти готов сдаться. Я готов приложить некоторые усилия для достижения цели в CSS, не поймите меня неправильно. Но когда кажется, что некоторые из самых простых вещей, которые можно сделать с помощью таблиц макета, совершенно невозможны в CSS, мне все равно, действительно ли концептуальная чистота начинает терпеть поражения.
Теперь, похоже, я злюсь, и я; Я злюсь на потраченное впустую время, злюсь на людей, которые выходят из фонов QuarkXpress, вручающих мне бесполезные проекты с фиксированной шириной, я злюсь на проваленное обещание CSS. Но я не пытаюсь начать спор; Я действительно хочу знать ответ на один простой вопрос, который определит, буду ли я еще раз пытаться использовать чистую CSS-вещь или использовать ее для разметки и использовать таблицы макетов всякий раз, когда мне это нравится. Потому что я не хотел бы возвращаться к таблицам макетов, думая, что это невозможно, если на самом деле это не так.
Вопрос заключается в следующем: есть ли способ с использованием макета чистого CSS иметь слева столбец с фиксированной шириной, а справа от него разместить таблицу данных, и таблица данных аккуратно займет оставшуюся часть какое место доступно? То есть тот же макет, который легко достижим при наличии таблицы макетов с двумя ячейками шириной 100% и фиксированной шириной в левой ячейке?
10 ответов
<div style="width: 200px;background-color: #FFFFCC; float: left;">
Left column
</div>
<div style="margin-left: 200px; background-color: #CCFFFF">
Right column
</div>
Это должно сделать это (очевидно, реализация будет зависеть от того, где она находится на странице, но я думаю, что это концепция, которую вы ищете).
Это то, что вы ищете?
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 лет, и я до сих пор изучаю интересные приемы каждый день.
Я думаю, это то, что вы ищете:
<table style='width: 100%;'>
<tr>
<td style='width: 200px;'></td>
<td></td>
</tr>
</table>
Поблагодаришь меня позже. = Р
(Я, очевидно, шучу.... вроде...)
Во-первых, я бы порекомендовал книги Эрика Мейера по CSS, а также ссылку на CSS в Интернете: A List Apart. Я широко использую CSS в своей работе, и я думаю, что с этим я справился довольно хорошо.
С учетом всего сказанного: делай, что работает. Я прошел через ту боль, которую вы только что испытали. В конце концов, я решил, что не стоит подвергать риску мой дизайн, просто чтобы сказать, что я не использовал таблицы.
Помните: вам не платят за CSS - вам платят за написание работающего программного обеспечения.
Чтобы держать этот вопрос в актуальном состоянии, вот 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>Пример 2: CSS calc();
calc() Работает с IE9 и выше, хотя поддержка некоторых версий браузера Android выглядит немного странно: http://caniuse.com/
#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/
#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, которые подробно описаны здесь.
#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 различными способами!
Вы можете попробовать это:
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">
</div>
</form>
</div>
Что-то вроде этого:
<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 это очень сложно.
Мне нравится, что CSS все еще занимает полную страницу кода, чтобы дублировать пару строк использования таблицы.
После борьбы с CSS-войной я пришел к выводу, что "чистый" находится в глазах смотрящего, и перешел к более подходу "давайте просто использовать то, что работает".
Используйте CSS для того, для чего он хорош: чтобы вещи выглядели красиво. Используйте DIV и SPAN, когда можете. Но если вы тратите один день на то, чтобы выстроить все воедино в разных браузерах, то добавьте таблицу туда и продолжайте. Не волнуйтесь, вопреки тому, что большинство людей думают, щенок на самом деле не умрет.
Как говорит Спарр, есть CSS, который конкретно отвечает этому требованию, потому что на самом деле невозможно сделать это любым другим способом без различных, возможно, неприемлемых компромиссов, и это display:table, display:table-cell, так далее.
К сожалению, Internet Explorer до Internet Explorer 8 не поддерживает эти режимы отображения, поэтому проблема не в CSS, а в том, что браузеры (на самом деле Internet Explorer, остальные в порядке) не поддерживают CSS должным образом.
Хорошей новостью является то, что это меняется, и со временем у нас будет правильное решение CSS. А пока выберите один из компромиссов в других ответах.
Почти наверняка есть ответ, который включает применение display:table и display:table-cell к рассматриваемым элементам. Что сказать... нет.