Табличная компоновка содержимого без использования поплавка

Этот код выложен в 1 колонке. Я хочу получить табличную раскладку из двух столбцов.Табличная компоновка содержимого без использования поплавка

<span id="col1"> 
    <div>Filter by</div> 
    <div> 
    <input type="text" value="hello" /> 
    </div> 
</span> 
<span id="col2"> 
    <div>Search</div> 
    <div> 
    <input type="text" value="hello" /> 
    </div> 
</span>

Как я могу достичь этого без использования поплавка?

fiddle

источник

2016-08-31 P.Brian.Mackey

Может ли отображаться: встроенный блок? [Пример здесь] (https://jsfiddle.net/b8amy4mv/4/). У меня такое чувство, что вы ищете более сложное решение. – showdev

Вы можете использовать Flexbox для этого:

.container { 
 
    display: flex; 
 
}

<div class="container"> 
 
    <div id="col1"> 
 
    <div>Filter by</div> 
 
    <div> 
 
     <input type="text" value="hello" /> 
 
    </div> 
 
    </div> 
 
    <div id="col2"> 
 
    <div>Search</div> 
 
    <div> 
 
     <input type="text" value="hello" /> 
 
    </div> 
 
    </div> 
 
</div>

Обратите внимание, что я изменил ваш span к div элементов (так как пределы шкалы инлайн и не должны содержать блочные элементы). Я также обернул весь блок div.container, поэтому я смогу установить этот контейнер в качестве flexbox.

источник

2016-08-31 21:51:11 Dekel

Я видел flex, но я не знал, как правильно его применять. Это именно то, что мне нужно –

Добро пожаловать! Также будет оценена верхняя часть :) – Dekel

Уже сделали и отметили как ответ. Несмотря на то, что это отмечено как дубликат, вы помогли мне выяснить, как правильно использовать ответы в другом вопросе. –

Предполагая, что вы хотите столбцы, чтобы иметь возможность показать/спрятать, вы можете сделать это:

<head> 
<script> 
$('.next').click(function() { 
var next = $('.col').next(); 
var curr = $('.col'); 

next.addClass('col-active'); 
curr.removeClass('col-active'); 
}); 
</script> 
<style> 
.col { 
display: none; 
} 

.col-active { 
display: block !important; 
} 
</style> 
</head> 
<body> 
<span id="col1" class="col col-active"> 
    <div>Filter by</div> 
    <div> 
    <input type="text" value="hello" /> 
    </div> 
</span> 
<span id="col2" class="col"> 
    <div>Search</div> 
    <div> 
    <input type="text" value="hello" /> 
    </div> 
</span> 

<a class="next">Next Page</a> 
</body>

В сущности, это показывает и скрывает столбцы, основанные на <a> быть нажата. Я использую это довольно много, имея слайдеры/таблицы.

Надеюсь, что это поможет :)

источник

2016-08-31 21:51:45 Astrify

Табличная компоновка содержимого без использования поплавка

ответ

Смежные вопросы