кнопка поплавок опускается ниже родительского DIV

Учитывая этот упрощенный фрагмент:кнопка поплавок опускается ниже родительского DIV

<html> 
    <body> 
    <div> 
     <div style='text-align:center;'>asdfaskjdfakjsd</div> 
     <div style='float:right'> 
     <input type='submit' value='asdf' /> 
     </div> 
    </div> 
    </body> 
</html>

Кнопка всплывать вправо, но ниже текст (На следующей строке). Я знаю, что я могу перестроить его с помощью относительного позиционирования, но есть ли правильный способ иметь как на одной линии.

Еще лучше, если добавление кнопки справа не повлияет на выравнивание по центру текста. т.е. он не попадает влево.

источник

2012-06-27 Kassym Dorsel

Приношу свои извинения за прыжки. Я заметил, что даже с перевернутыми divs текст не выглядел полностью центрированным.

Вот еще одно решение (пятый пример): http://jsfiddle.net/tracyfu/zYzqr/

#method5 { 
    position: relative; 
} 

#method5 .submit { 
    position: absolute; 
    right: 0; 
    top: 0; 
}

Единственная проблема состоит в том, что если вы не будете осторожны, или ваш текст является динамическим, он может столкнуться с абсолютно позиционирован представить ,

источник

2012-06-27 17:55:33

Спасибо за это. Если вы посмотрите на это: http://jsfiddle.net/zYzqr/1/, последний из них без кнопки, есть способ, чтобы текст выравнивался таким же образом с помощью кнопки. –

Да. Я обновил мою [скрипку] (http://jsfiddle.net/tracyfu/zYzqr/), чтобы сосредоточить весь текст, но я думаю, что @StevenH в значительной степени имеет лучшее решение для вас. –

Я неправильно понял ваш вопрос в первый раз. Вы должны добавить float:left; на свой начальный div, а также обязательно добавить clear:both; в под ним. Если вы хотите, чтобы текст был центрирован, вам нужно иметь ширину в начальном div.

HTML:

<div id="container"> 
    <div id="content"> 
     asdfaskjdfakjsd 
    </div> 
    <div id="containerButton"> 
     <input type='submit' value='asdf' /> 
    </div> 
</div> 
<div class="clear">asdfaskjdfakjsd</div>

CSS:

#container { 
    width:300px; 
} 

#content {  
    float:left; 
    text-align:center; 
    width:90%; 
} 

#containerButton { 
    text-align:right; 
} 

.clear { 
    clear:both; 
}

Live DEMO

источник

2012-06-27 17:49:21

Не похоже на работу. Он просто заставляет родительский div включать оба объекта. т.е. родительский div охватывает две строки. –

Я добавил демо. Разве демо не делает то, что вы хотите? –

http://jsfiddle.net/pP285/5/ - Это то, что я хотел. Извините, если не ясно. –

Вы можете изменить порядок двух дивы:

<div style='float:right'> 
    <input type='submit' value='asdf' /> 
    </div> 
    <div>asdfaskjdfakjsd</div>

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

Для демонстрации этого эффекта используется fiddle. Четвертый пример показывает, что divs отменены.

источник

2012-06-27 17:52:23

Это решение является самым простым. Мне нравится иметь мой HTML в определенном порядке, но я определенно прибегал к этому методу в ряде случаев. –

Почему это работает? Также, если текст выровнен по центру, он попадает влево, чтобы освободить место для кнопки. Есть ли способ сохранить текст в центре, не обращая внимания на кнопку. –

Это работает, потому что float (all els) выложены в порядке, указанном HTML. Если ваш контент div на первом месте, DOM поместит div на страницу, и ваш плавающий контент будет выложен и перемещен после div. Если сначала поместить float, он будет размещен, а затем будет перемещен. Поскольку float не «занимает место», потому что он был вырван из потока содержимого, контент, который появляется после него, кажется встроенным в float. -Простите за такое запутанное объяснение. –

Стандартным подходом является использование «clearfix» взлома. CSS:

/* For modern browsers */ 
.cf:before, 
.cf:after { 
    content:""; 
    display:table; 
} 

.cf:after { 
    clear:both; 
} 

/* For IE 6/7 (trigger hasLayout) */ 
.cf { 
    *zoom:1; 
}

Кредит Nicolas Gallagher. Затем обернуть строку в cf элемент:

<div class="cf"> 
    <span>Button text</span> 
    <div style='float:right'> 
     <input type='submit' value='asdf' /> 
    </div> 
</div>

Текст кнопки изменяется на span, или вы могли бы оставить его в качестве div и всплывают его влево. cf используется для получения свойств блока для набора элементов, которые, естественно, не демонстрируют их. Без этого последующий контент не будет очищен.

DEMO

источник

2012-06-27 18:03:21 paislee

Я рекомендую вам взглянуть на решение Clearfix от Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ Мне очень нравится этот метод. Это намного стройнее. Я также рекомендовал бы прямо применять clearfixes к объявлениям стилей стилей и избегать классов, описывающих разметку. –

@TracyFu Я включил более компактное решение clearfix. Не применяли бы стили clearfix для каждого элемента, который в нем нуждался бы в результате раздутых CSS-файлов? Также вы могли бы объяснить, что вы подразумеваете под «избегайте классов, которые описывают разметку»? Thx – paislee

Да, жаль, что не уточнил. Я использовал [Sass] (http://sass-lang.com/) некоторое время, что делает это возможным. Я думаю, что класс 'clearfix' в порядке; мой стиль заключался в том, чтобы избегать таких классов, как 'left', которые описывают конкретное визуальное поведение. «Лучшие практики», описанные некоторыми людьми, - это использование семантических классов, которые описывают контент по сравнению с теми, которые описывают поведение. Тем не менее, я прочитал [это] (http://coding.smashingmagazine.com/2012/06/19/classes-where-were-going-we-dont-need-classes/) на днях, который накрутил мое мышление по семантическому HTML. В заключение, возможно, не слушайте меня :) –

кнопка поплавок опускается ниже родительского DIV

ответ

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