Нужна универсальная CSS отделения, которая не накладывается (как таблица)
Расширение пользовательского интерфейса WiX не позволяет этот тип настройки. Ваши два шанса будут
1) define Name = "Test Application $ (var.ProductVersion)" (Побочный эффект. Версия перечислена в программах и функциях дважды
2) Прекратить использование расширения WiXUI и вместо этого клонируйте весь код из https://github.com/wixtoolset/wix3/tree/develop/src/ext/UIExtension/wixlib в ваш проект.
6 ответов
Нет никакого простого способа сделать это, которое является crossbrowser товарищеской встречей, о которой я знаю.
По крайней мере, в Firefox можно составить моделируемую таблицу путем установки отделений с
display:table;
display:table-row;
display:table-cell;
Так, чтобы те отделения работали как элементы таблицы. Затем поле будет содержать, это довольно. Является ли это хорошим решением или не debateable.
У меня были подобные проблемы с макетами страницы самого. Обычно я решал тех, которые установкой min-width и overflow:auto;
Если вы действительно не хотите использовать таблицу, вы можете сделать это:
div.box div {
overflow: hidden;
zoom: 1; /* trigger haslayout for ie */
}
В следующий раз такого рода проблема возникает, перейдите на giveupandusetables.com .
Один путь состоит в том, чтобы сделать Ваши плавания полей. Добавьте float:left; к полю, заголовку поля и кузову-фургону. Добавьте clear:both; к кузову-фургону для принуждения его ниже заголовка поля. Необходимо будет, вероятно, добавить, что ясное свойство к любому содержанию следует также.
Вы не заставите правые края заголовка поля и кузова-фургона выравниваться, все же. Если Вы хотите, чтобы их ширины были тем же, Вы действительно хотите таблицу. Таблица является инструментом для создания всех ячеек в том же столбце для совместного использования ширин.
Для других идей проверьте это ТАК вопрос.
Это работает (на самом деле скрепляет лучше, чем таблицы в ie7 также),
div.box{
float:left;
width:auto;
margin: 10px 1000px 10px 10px;
}
div.box-header{
float:left;
width:100%;
border: solid 1px #BBBBBB ;
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
}
div.box-body{
clear:left;
float:left;
width:100%;
padding: 4px;
border: solid 1px #BBBBBB ;
border-top: none;
}
Примечание: оба поля должны иметь то же левое и правое дополнение, или каждый выступает немного.
Во-первых, необходимо использовать семантическую разметку. Если что-то - заголовок, и содержание повышают его как таковой с заголовком и тегами абзаца. Это поможет, Вы переместиться из 'пути таблицы' думать были Вами, пытаются эмулировать Вашу разметку и стили как таблица, разметка должна быть на первом месте, CSS может появиться после.
Следующее должно сделать то, что Вы хотите:
<style type="text/css">
* {
margin:0px;
padding:0px;
}
.box {
border: solid 1px #BBBBBB;
margin:10px;
}
.box h3 {
padding: 4px;
border-bottom: solid 1px #BBBBBB;
background-color: #DDDDDD;
}
.box p {
padding: 6px;
}
</style>
<div class='box'>
<h3>please help make these divs stop overlapping</h3>
<p>please help make these divs stop overlapping</p>
</div>
Размышление о разметке и стиле отдельно является путем к Мастерству Дзэн CSS: o)
Поплавки не нужны, но вы, кажется, путаете использование полей и отступов. Следующие незначительные изменения в вашем стиле работают так, как вам нужно:
<style type="text/css">
div.box, table.box
{
margin: 10px 1000px 10px 10px;
border: solid 1px #BBBBBB ;
padding: 0px;
}
div.box-header, td.box-header
{
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
border-bottom: solid 1px #BBBBBB ;
}
.box-body, td.box-body
{
padding: 6px;
}
</style>
Я изменил отступы на поле на полях, переместил границу на ваш блок и добавил подчеркивание к заголовку.