Я много раз размещал изображения и вставные блоки в верхней части контейнера с помощью float:right (или left). Недавно мне понадобилось разместить div в правом нижнем углу другого div с обычным обертыванием текста, которое получается при использовании float (текст обертывается только сверху и слева).
Я думал, что это должно быть относительно просто, несмотря на то, что float не имеет нижнего значения, но я не смог сделать это, используя несколько методов и поиск в Интернете не дал ничего, кроме использования абсолютного позиционирования, но это не дает правильного поведения обертывания текста.
Я думал, что это очень распространенная конструкция, но, видимо, это не так. Если ни у кого нет предложений, мне придется разбить текст на отдельные поля и выровнять div вручную, но это довольно опасно, и мне бы не хотелось делать это на каждой странице, где это необходимо.
EDIT: Просто примечание для всех, кто сюда заходит. Вопрос, приведенный выше как дубликат, на самом деле не является дубликатом. Требование, чтобы текст обводился вокруг элемента вставки, делает его совершенно другим. На самом деле, ответ на самый популярный ответ здесь ясно показывает, почему ответ в вопросе по ссылке неверен в качестве ответа на этот вопрос. В любом случае, общего решения этой проблемы по-прежнему не существует, но некоторые из решений, опубликованных здесь и в вопросе по ссылке, могут сработать в конкретных случаях.
Установите родительский div в position: relative
, затем внутренний div в...
position: absolute;
bottom: 0;
...и вот так :)
Способ ее работы заключается в следующем:
-МОЗ-преобразования:поворот(180 градусов); -webkit-преобразования:поворот(180 градусов); -о-преобразования:поворот(180 градусов); -МС-преобразования:поворот(180 градусов); фильтр:идентификатор progid:DXImageTransform.Майкрософт.BasicImage(вращение=2); JSfiddle:
После борьбы с различными методами в течение нескольких дней я должен сказать, что это кажется невозможным. Даже используя javascript (что я не хочу делать), это кажется невозможным.
Поясню для тех, кто, возможно, не понял - вот что я ищу: в издательском деле довольно распространено размещение вставки (картинки, таблицы, рисунка и т.д.) так, чтобы ее нижняя часть совпадала с нижней частью последней строки текста блока (или страницы) с текстом, обтекающим вставку естественным образом сверху и справа или слева в зависимости от того, на какой стороне страницы находится вставка. В html/css тривиально использовать стиль float, чтобы выровнять верх вставки с верхом блока, но, к моему удивлению, оказалось невозможным выровнять низ текста и вставки, несмотря на то, что это обычная задача верстки.
Думаю, мне придется пересмотреть цели дизайна для этого пункта, если только у кого-нибудь не будет предложений в последнюю минуту.
Я получил это в jQuery, поставив нулевую ширину распорка элемент выше поплавка вправо, затем размеров стойки (или трубы) по заявлению родителя высота минус плавал ребенок'с высоты.
До этого JS ногами, я пользуясь положением абсолютный подход, который работает, но позволяет текстовом потоке позади. Поэтому я переключатель в положение статического включения подход распорки. (заголовок родительский элемент, вырез-то, что нужно внизу справа, и труба моя распорка)
$("header .pipe").each(function(){
$(this).next(".cutout").css("position","static");
$(this).height($(this).parent().height()-$(this).next(".cutout").height());
});
УСБ
header{
position: relative;
}
header img.cutout{
float:right;
position:absolute;
bottom:0;
right:0;
clear:right
}
header .pipe{
width:0px;
float:right
}
Трубы должны прийти 1-го, то вырез, то текст в порядок HTML-кода.
Если вы'ре хорошо только с самой нижней строки текста идет в сторону блока (в отличие от полностью вокруг и под ним, которые вы можете'т обойтись без прекращения заблокировать и начала новой игры), это's не невозможно, чтобы плавать в одном из нижних углов родительского блока. Если вы положите содержимое в тег абзаца в блоке и хотите разместить ссылку в правом нижнем углу блока, поставить ссылку в пункте блока и установить его на поплавок: справа, затем поместить в тег div с Clear: как раз под конец абзаца. Последний див, чтобы убедиться, что родительский тег окружает плавали теги.
<div class="article" style="display: block;">
<h3>title</h3>
<p>
text content
<a href="#" style="display: block;float: right;">Read More</a>
</p>
<div style="clear: both;"></div>
</div>
Если вы установите родительский элемент как положение:относительная, можно задать ребенку в нижнее положение позиция:абсолютная; и bottom:0;
в
#outer {
width:10em;
height:10em;
background-color:blue;
position:relative;
}
#inner {
position:absolute;
bottom:0;
background-color:white;
}
<div id="outer">
<div id="inner">
<h1>done</h1>
</div>
</div>
в
Если вы хотите текст, чтобы обернуть красиво:-
в
<!-- Need two parent elements -->
<div class="outer">
<div class="inner">
<h3>Sample Heading</h3>
<p>Sample Paragragh</p>
</div>
</div>
.outer {
display: table;
}
.inner {
height: 200px;
display: table-cell;
vertical-align: bottom;
}
/* Just for styling */
.inner {
background: #eee;
padding: 0 20px;
}
в
Я знаю, что это старый, но я недавно столкнулась с этой проблемой.
использовать абсолютную позицию дивов советы действительно глупо, потому что весь поплавок вещь как бы теряет точку с абсолютной позиции..
теперь, мне не удалось найти универсальное решение, но в большинстве случаев прибегали использовать плавающие ДИВС просто чтобы отобразить что-то в ряд, как ряд элементов span. и вы можете'т вертикально выровнять это.
для достижения подобного эффекта вы можете сделать это: не сделать див флоат, но это'ы свойству Display инлайн-блок
. затем можно выровнять его по вертикали, но это радует. вам просто нужно установить родительскую'ы див собственность вертикальный-выровнять
либо верх
, низ
, средний
или базовый
я надеюсь, что помогает кто-то
С введением основе, это стало довольно легко без взлома. выровнять-я: флекс-конец
на дочерний элемент будет выравнивать его по кросс-ось.
.container {
display: flex;
}
.bottom {
align-self: flex-end;
}
<div class="container">
<div class="bottom">Bottom of the container</div>
</div>
Выход:
в
.container {
display: flex;
/* Material design shadow */
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
height: 100px;
width: 175px;
padding: 10px;
background: #fff;
font-family: Roboto;
}
.bottom {
align-self: flex-end;
}
<div class="container">
<div class="bottom">Bottom of the container</div>
</div>
в
Я бы просто сделать таблицу.
<div class="elastic">
<div class="elastic_col valign-bottom">
bottom-aligned content.
</div>
</div>
И CSS:
.elastic {
display: table;
}
.elastic_col {
display: table-cell;
}
.valign-bottom {
vertical-align: bottom;
}
Увидеть его в действии:
Выбрал этот подход @Дэйв-Кок. Но это работает только если весь контент костюмы без прокрутки. Я ценю, если кто-то улучшит
outer {
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
}
.space {
float: right;
height: 75%;
}
.floateable {
width: 40%;
height: 25%;
float: right;
clear: right;
}
Вот код
Не уверен, но сценарий написал ранее, казалось, работать, если вы используете позиция: относительная абсолютная, а не на ребенка див.
#parent {
width: 780px;
height: 250px;
background: yellow;
border: solid 2px red;
}
#child {
position: relative;
height: 50px;
width: 780px;
top: 100%;
margin-top: -50px;
background: blue;
border: solid 2px green;
}
в
<div id="parent">
This has some text in it.
<div id="child">
This is just some text to show at the bottom of the page
</div>
</div>
</код></пре>
И никакие таблицы...!
Я нашел это решение в течение длительного времени, а также. Вот что я получаю:
выровнять-я: сгибает конец;
ссылка: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ Однако, я могу'т помню, откуда я открыл эту ссылку. Надеюсь, что это помогает
Теперь это возможно с Flex окно. Просто установите 'дисплей' родительских div как 'флекс' и 'маржи-топ' собственность 'авто'. Это не искажает любое имущество, как див.
в
.parent {
display: flex;
height: 100px;
border: solid 1px #0f0f0f;
}
.child {
margin-top: auto;
border: solid 1px #000;
width: 40px;
word-break: break-all;
}
<div class=" parent">
<div class="child">I am at the bottom!</div>
</div>
в
Я попробовал несколько из этих методов, и следующие работал для меня, так что если все еще здесь, если все остальное не помогло, то попробуйте этот, потому что он работал для меня :).
<style>
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
position: relative;
bottom:-10;
}
</style>
<div id="footer" >Sportkin - the registry for sport</div>
Использовать маржи-топ УСБ "имущество" с целью установить нижний колонтитул в нижней части контейнера. И использовать текст-выровнять-последний Усс `` свойство, чтобы установить содержание колонтитул в центре.
<div class="container" style="margin-top: 700px; text-align-last: center; ">
<p>My footer Here</p>
</div>
Если вам нужна относительного выравнивания и div's все еще арен'т дать вам то, что вы хотите, просто использовать таблицы и набор valign = "на дне" в ячейку соответствие содержания до дна. Я знаю, что это's не многие ответят на ваш вопрос так как div'ы должны заменить таблицы, но это то, что мне пришлось делать в последнее время с заголовка изображения, и это работает до сих пор безотказно.
Я пробовал этот сценарий, размещенных ранее;
div {
position: absolute;
height: 100px;
top: 100%;
margin-top:-100px;
}
Абсолютное позиционирование устраняет div в нижней части браузера при загрузке страницы, но когда вы прокрутите вниз, если страница больше не прокручивается с вами. Я изменил позиционирование относительное и она работает идеально. Див идет прямо на дно после загрузки, так что вы выиграли'т действительно вижу это, пока вы не получите на дно.
div {
position: relative;
height:100px; /* Or the height of your image */
top: 100%;
margin-top: -100px;
}