Применение маржи к центру & lt; div & gt; [Дубликат]
Я не уверен, как браузеры обрабатывают клики по элементам type="file" (проблемы безопасности и все), но это должно работать:
$('input[type="file"]').click();
Я протестировал этот JSFiddle в Chrome, Firefox и Opera, и все они показывают диалог просмотра файлов.
8 ответов
Вы правильно определили проблему. Поплавок <div> больше не используется для вычисления верхнего поля, а для этого 2 <div> просто прижаты друг к другу. Простым способом решения этого является просто обернуть 2-й <div>. Это позволит обертке (невидимо) прикрепить к первому <div> и разрешить вам указывать для этого пробел.
Трюк для правильной работы обертки состоит в том, чтобы иметь пробел быть внутренним белым пространством. Другими словами, оболочка использует дополнение вместо поля. Это означает, что все, что происходит за пределами оболочки (как и другие плавающие элементы), не имеет большого значения.
<div style="float: left; border: solid red 1px">foo</div>
<div class="wrapper" style="clear: both; padding-top: 90px;">
<div style="border: solid red 1px">This div should not touch the other div.</div>
</div>
-
1Благодарим вас за быстрый и точный ответ. – Elias Zamaria 10 December 2009 в 21:09
Добавьте это ниже плавающего div и над тем, который вы хотите нажимать на страницу:
<div class="clearfix"></div>
Затем в вашем файле css добавьте:
.clearfix {clear: both;}
Это в эффект создает невидимый элемент, на который может повлиять маржа вашего второго div - это то, что я видел на нескольких сайтах Wordpress. Это также дает вам возможность предоставить вам где-нибудь (т. Е. Внутри clearfix div) поставить любые разделительные элементы, такие как границы и т. Д.
Ясный открытый ключ; без контейнеров и дополнительных <div>
Другой ответ был почти прав, но пропустил width: 100%. Вот исправленная версия.
h1 {
clear: both;
display: inline-block;
width: 100%;
}
Сбрасывает без этого width: 100% либо требует, чтобы флотированный элемент находился в хорошо отмеченном контейнере или нуждался в дополнительном семантическом пустом <div>. И наоборот, строгое разделение контента и надбавок требует строгого решения CSS для этой проблемы, то есть без какого-либо дополнительного не-семантического HTML.
Сам факт того, что нужно отметить конец поплавка, не разрешает автоматическую верстку .
Если последняя ваша цель, поплавок должен быть оставлен открытым для чего угодно (абзацы, упорядоченные и неупорядоченные списки и т. д.), чтобы обернуть его , пока не появится ясность. В приведенном выше примере очистка задается новым заголовком.
Это решение широко используется на моем сайте , чтобы решить проблему, когда текст рядом с плавающей миниатюрой короткий и верхний край следующего очищающего объекта не соблюдается. Он также предотвращает любое ручное вмешательство при автоматическом создании PDF-файлов с сайта.
-
1Вы просто предоставляете существующий элемент для свойства
clearздесь, чтобы очистить плавающие документы, что является предполагаемым использованиемclear, а не «clearfix». Clearfix обычно относится к хакеру, который используется для очистки плавающих макетов, и по определению подразумевает использование семантически пустого элемента или псевдоэлемента. См. stackoverflow.com/questions/8554043/what-is-clearfix и stackoverflow.com/questions/211383/… для примеров. – BoltClock♦ 8 April 2015 в 11:30 -
2@BoltClock согласился! Я заменил слово clearfix & quot; путем "очистки" в моем ответе. Я не знал, что & quot; clearfix & quot; была такой макетной. – Serge Stroobandt 20 June 2015 в 05:13
Во втором div:
float: none; display: inline-block;
Таблица совместимости для браузеров: http://caniuse.com/#feat=inline-block
установите «float: left» на второй div
Проблема заключается в том, что второй div может вычислять только маржи от неплавающего элемента. Вам нужно добавить любой неплавающий элемент, прежде чем пытаться установить маржу. Неразрывное пространство или линия, выходящая за пределы плавающего div и до второго div, будут работать.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS test</title>
</head>
<body>
<div style="float: left; border: solid red 1px; height:40px;">foo</div>
<div style="clear: both; margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div>
</body>
</html>
другим способом является добавление пустого абзаца с четким как после последнего плавающего div.
<p style="clear:both"></p>
вы могли бы просто добавить div между ними
<div style="float: left; border: solid red 1px">foo</div>
<div style="clear:both;"></div>
<div style="margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div>
, и это должно позаботиться об этом.
Многие темы WordPress (и не только) используют эту технику