Обычно вы устанавливаете элементы для отображения: inline, если вы хотите, чтобы они отображались в одной строке. Однако установка элемента в строку означает, что атрибут width будет бессмысленным.
Как вы делаете divs в одной строке, не делая их встроенными?
Вы можете использовать display:inline-block.
Это свойство позволяет элементу DOM иметь все атрибуты блочного элемента, но поддерживать его в строке. Там есть некоторые недостатки, но в большинстве случаев это достаточно хорошо. Почему это хорошо и почему это может не сработать для вас.
EDIT: Единственный современный браузер, у которого есть некоторые проблемы с этим, - IE7. См. Quirksmode.org
Я использовал свойство
display: table;
и
display: table-cell;
чтобы достичь того же самого. В приведенной ниже таблице показано 3 таблицы, завернутые в divs, и эти divs дополнительно завернуты в родительский div
<div id='content'>
<div id='div-1'><!-- COntains table --></div>
<div id='div-2'><!-- contains two more divs that require to be arranged one below other --></div>
</div>
Вот jsfiddle: http://jsfiddle.net/vikikamath/QU6WP/1/ Я думал, что это может быть полезно для тех, кто хочет установить div в одной строке, не используя display-inline
Flex - лучший способ. Просто попробуй..
display: flex;
Вы можете плавать ваши разделители столбцов, используя float: left; и дать им ширину.
И чтобы убедиться, что ни один из ваших других материалов не запутался, вы можете обернуть плавающие divs в родительский div и дать ему четкий стиль float.
Надеюсь, что это поможет.
Вы можете использовать float: left в DIV или использовать тег SPAN, например
<div style="width:100px;float:left"> First </div>
<div> Second </div>
<br/>
или же
<span style="width:100px;"> First </span>
<span> Second </span>
<br/>