CSS: Два 50% столбов жидкости, не уважая минимальную ширину
Когда вы пишете "\s" в PHP, буквальная строка равна \s, потому что \s не является допустимой escape-последовательностью.
Когда вы пишете "\\s" в PHP, буквальная строка равна \s, потому что \\ является допустимой escape-последовательностью.
JSON, с другой стороны, выдаст ошибку для недопустимых escape-последовательностей, что является вашей проблемой.
Решение: Не пишите JSON вручную.
$json = json_encode(['regex'=> ['Hello\s+World']]);
Вывод: {"regex":["Hello\\s+World"]} [примечание: буквальная строка, допустимый JSON]
Плохое решение - это больше проблем, чем оно того стоит, и, вероятно, вызовет проблемы в дальнейшем: "Hello\\\s+World" добро пожаловать в побег из ада.
8 ответов
Я смог не придумать "никакой, HTML-таблицы потребовали" решения, базирующегося прочь техники Stu Nicholls при Игре CSS, и мне лично нравится он, потому что не только делает это работает в IE6 + и FF2 +, это - также действительный CSS, который не требует никаких взломов. Для моего аргумента на том, почему основанное на CSS расположение предпочтительно по HTML-таблицам, посмотрите ниже.
Во-первых, я рекомендую при разработке новых страниц с CSS сделать это со стандартами совместимый режим браузера. Для объяснения quirksmode и стандартов совместимый режим, проверьте эту статью от одного из моих любимых сайтов ресурса CSS. Все, что необходимо сделать, добавляет определенный элемент DOCTYPE наверху страниц. CSS будет затем вынужден представить в стандартах совместимый режим, приводящий к меньшему количеству ошибок и особенностей браузера. В случае, который Вы не можете переключить на стандарты, совместимый режим там является решением минимальной ширины для браузеров в quirksmode, также доступном при Игре CSS.
Во-вторых, необходимо добавить дополнительную обертку вокруг существующей разметки. Эта обертка используется для установки минимальной ширины для браузеров, которые понимают минимальную ширину (не IE). Можно затем использовать * прием HTML, чтобы конкретно предназначаться для IE 6 и применить технику Stu Nicholl к внутренним оберткам. Техника детализирована здесь, и определенный используемый пример "#2 Для стандартов совместимый режим IE":
http://www.cssplay.co.uk/boxes/minwidth.html
Конечный результат довольно прост. Это создает 2 50%-х столбца с помощью метода стиля АЛАБАМЫ на 2 столбца, упомянутого в исходном вопросе, которые имеют общую минимальную ширину (500 пкс в этом примере), где столбцы прекращают изменять размер, и правый столбец не падает ниже левого столбца. Я надеюсь, что это помогает!
Править: Эта та же техника может использоваться для применения перекрестного браузера совместимая минимальная ширина к чему-либо. Например, столбцы не должны составлять 50%, каждый и любое число столбцов могут использоваться. http://www.glish.com/css/ является большим ресурсом для основанных на CSS макетов страницы и в сочетании с этим методом минимальной ширины существует много хороших разметок, которые могут быть созданы с минимальным, действительным CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
/* For browsers that understand min-width */
.width {
width: 100%;
min-width: 500px;
}
/* IE6 Only */
* html .minwidth {
border-left: 500px solid white;
position: relative;
float: left;
}
/* IE6 Only */
* html .wrapper {
margin-left: -500px;
position: relative;
float: left;
}
.left {
float: left;
width: 50%;
}
.right {
float: left;
}
</style>
</head>
<body>
<div class="width">
<div class="minwidth">
<div class="wrapper">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
</div>
</div>
</body>
</html>
Теперь, мой стимул для создания учетной записи Переполнения стека был способностью ответить на предложение ниже тот, "Если Вы хотите два столбца, используйте таблицу, вместо того, чтобы пытаться вынудить Отделение вести себя как таблица". Так как я являюсь слишком новым, чтобы или прокомментировать или провалить, я увеличиваю это обсуждение.
В самом деле?
Кто-то задает вопрос об основанных на CSS разметках, и Вы отвечаете, говоря им использовать HTML-таблицы?
Позвольте мне запуститься путем высказывания, что я не полагаю, что HTML-таблицы являются абсолютно ненужными. На самом деле, любое время, я должен отобразить табличные данные, т.е. реляционные данные, я использую HTML-таблицу. Свойства дисплея таблицы CSS не полностью поддерживаются все же (прибывающий скоро в IE8!) и использование одноуровневой HTML-таблицы является эффективным решением. Посмотрите на разметку для любой из веб-страниц Google, и Вы будете видеть, что они согласились бы.
Как кто-то, кто провел много времени, пишущий основанные на CSS разметки, которые являются перекрестным браузером, совместимым, когда они, возможно, сделали его через 10 минут с помощью таблицы, я соглашаюсь, что существует более легкое решение этой проблемы. Однако просто, потому что можно использовать динамит для ремонта кухни, не означает, что Вы должны. Следующая статья дает подробное объяснение того, почему основанные на CSS разметки более желательны.
Попробуйте это:
<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">
.floatme {
float: left;
width: 50%;
}
.minwidth {
width: 500px;
height: 0;
line-height: 0;
clear: both;
}
</style>
<body>
<div id="wrapper">
<div class="floatme">
left
</div>
<div id="floatme">
right
</div>
<div class="minwidth"> </div>
</div>
</body>
</html>
Используйте таблицу на 2 столбца. Это сделает точно, что Вы хотите. Отделение, как предполагается, используется для простого деления логически отличных блоков, и таблицы там для разметки данных с колоннами. Если Вы хотите два столбца, используйте таблицу, вместо того, чтобы пытаться вынудить Отделение вести себя как таблица.
Просто установите минимальную ширину для обертки и просто измените левые и правые столбцы на проценты. Это будет препятствовать тому, чтобы Ваши два столбца были продвинуты в/по/под друг друга.
Попробуйте это за стиль:
.left, .right { width:50%; float: left; }
.right { float: right; }
.minwidth { min-width: 500px; display: block; height: 0; clear: both; }
Это - быстрая попытка, но она работает (только протестированный в Firefox):
<head>
<style type="text/css">
#left {
float: left;
width: 50%;
}
.minwidth {
min-width: 500px;
background:#eee;
height: 0;
overflow:visible;
}
.col{
min-width:250px;
background:#eaa;
}
</style>
</head>
<body>
<div id="wrapper" class="minwidth">
<div id="left" class="col">
left
</div>
<div id="right" class="col">
right
</div>
<div><!-- Not needed --></div>
</div>
</body>
Что ж, я не хочу вдаваться в политический спор, но рассуждения в процитированной статье Агудзварда о том, «почему CSS лучше таблиц» не имеют ничего общего с таблицами. Он демонстрирует, что CSS лучше, чем использование отдельных тегов шрифтов, настроек цвета и т.п. снова и снова, когда многие элементы страницы требуют одного и того же стиля. Да, я абсолютно согласен с тем, что если у вас есть сотня элементов на странице, все они должны быть зеленого цвета, 14 пунктов, текст Arial, тогда имеет смысл создать для этого стиль CSS, а не копировать и вставлять тег шрифта снова и снова. , по всем причинам, которые они приводят. Это удвоится, если вы хотите использовать тот же стиль на нескольких страницах.
Но какое это имеет отношение к таблицам?
Причина, похоже, такая: " То, что инструмент подходит для одного типа проблем, не означает, что он подходит для всех возможных проблем. Молотки отлично подходят для забивания гвоздей. Это не значит, что я использую их, чтобы вкручивать винты. Если я могу сделать макет более простым и логичным с помощью таблиц, чем с помощью тегов div и CSS, то настаивать на том, что я все же должен использовать CSS, потому что «CSS - это хорошо», заставляет меня спрашивать: Ну и что?
То, что инструмент подходит для одного типа проблем, не означает, что он подходит для всех возможных проблем. Молотки отлично подходят для забивания гвоздей. Это не значит, что я использую их, чтобы вкручивать винты. Если я могу сделать макет более простым и логичным с помощью таблиц, чем с помощью тегов div и CSS, то настаивать на том, что я все же должен использовать CSS, потому что «CSS - это хорошо», заставляет меня спрашивать: «Ну и что?»Вот хороший пример того, что вы хотите, я думаю.
http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
In Вкратце, вот CSS:
/* Start of Column CSS */
#container2 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:#ffa7a7; /* column 2 background colour */
}
#container1 {
float:left;
width:100%;
position:relative;
right:50%;
background:#fff689; /* column 1 background colour */
}
#col1 {
float:left;
width:46%;
position:relative;
left:52%;
overflow:hidden;
}
#col2 {
float:left;
width:46%;
position:relative;
left:56%;
overflow:hidden;
}
Вот html:
<div id="container2">
<div id="container1">
<div id="col1">
<!-- Column one start -->
<h2>Equal height columns</h2>
<p>It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.</p>
<h2>Valid XHTML strict markup</h2>
<p>The HTML in this layout validates as XHTML 1.0 strict.</p>
<!-- Column one end -->
</div>
<div id="col2">
<!-- Column two start -->
<h3>Windows</h3>
<ul>
<li>Firefox 1.5, 2 & 3</li>
<li>Safari</li>
<li>Opera 8 & 9</li>
<li>Explorer 5.5, 6 & 7</li>
<li>Google Chrome</li>
<li>Netscape 8</li>
</ul>
<!-- Column two end -->
</div>
</div>
</div>