Как можно сосредоточить текст и текст с плавающей запятой в одной строке, когда все имеет динамическую ширину?

Ответ 1

Попробуйте следующее:

<div class='content' style="width: 50%; padding: 15px; text-align: center; position: relative">
    <div class="noDown" style="position: absolute; right: 0;">ASDF!</div>
    Lorem ipsum...
</div>​

Тест JsFiddle: http://jsfiddle.net/3Y7ty/2/

Ответ 2

IE8 + Старый Достаточно?

Основываясь на вашей скрипке, вы можете получить то, что хотите в IE8+. Обратите внимание, что оболочка #b должна иметь свойство box-sizing, чтобы получить значение width: 50%, включая padding. Затем для вашего плавающего элемента просто добавьте это:

margin: 0 -15px 0 -100%;

Правильное поле -15px учитывает ваш 15px правильный отступ, чтобы полностью потянуть элемент вправо, а затем левое поле -100% заставляет исходный текст полностью центрировать.

Или нужна ли поддержка IE7?

Вы упомянули о необходимости поддержки "старых браузеров", но вы не даете никакой информации о том, как удержать (IE8 "старый" сейчас, но, возможно, вы ссылаетесь даже на более старые). Если вам нужна поддержка IE7 (или ниже?), Вам придется условно настроить IE7 и использовать это вместо:

margin: -1.2em -15px 0 0;

IE7 не распознает float: right так же, как и более поздние браузеры, и он будет помещать его "ниже" в предыдущий текст, а левое поле -100% потянет плавающий элемент влево. Таким образом, что уходит, и чтобы вывести текст в соответствие с предыдущим текстом, мы даем ему отрицательное верхнее поле, которое должно быть установлено равным line-height используемого шрифта (обычно это будет 1.2 или 1.1, вы можете явно установить его в контейнере #b). Я не проверял, работает ли это в IE6.

Ответ 3

Это хорошо для вас? http://jsfiddle.net/3Y7ty/

.container {
    width:100%;
    overflow:hidden;
    position:relative;
}
.center {
    width:50%;
    padding:15px;
    margin:0 auto;
    background:#ccc;
}

.right {
    display:inline-block;
    padding:15px;
    background:#999;
    position:absolute;
    right:0;
    top:0;
}


<div class="container">

 <div class="center">
     Lorem ipsum...
 </div>

 <div class="right">
     ASDF!
 </div>

</div>

Ответ 4

Я добавил эту скрипку. http://jsfiddle.net/nQvEW/68/. Проверьте это.

Я поставил основной элемент как абсолютный, в то время как один из дочерних элементов будет относиться к родительскому и другому как абсолютный. Верхний и левый атрибуты могут быть скорректированы в соответствии с вашими потребностями. Но для основного элемента div я жестко закодировал следующее. Вы можете добавить это как CSS.

position:absolute;
width:500px;
height:40px;
background-color:#F00;

Ответ 5

вы можете попробовать:

    <div style="width:50%; padding: 15px; text-align: center; ">
Lorem ipsum...<div style=" display:inline; float:right;">ASDF!</div>
</div>

Он работал в быстром макете, который я только что сделал.

Ответ 6

На самом деле это не так сложно, как кажется. Вам просто нужно удалить выровненный по правому краю div из нормального потока и положения (выровнять) его справа от текстового контейнера. (Все пронумерованные строки CSS в демонстрации необходимы, остальные для демонстрационных целей.)

Преимущество этого решения состоит в том, что контейнер и текстовые элементы текут нормально, и он использует ту же структуру HTML, что и ваш пример.

Demo:

Просмотреть демо → → http://pasteboard.s3.amazonaws.com/images/1U5yFIwE.png

Основной код:

#text {
  margin: auto; /* aligns #text to the center of #container */
  text-align: center; /* self-explanatory; aligns text to the center */
  position: relative; /* needed so that the position of #right is relative to #text, not the body */
}

#right {
  display: inline-block; /* allows #right to display on the same line as the text in #text while still acting like a block element (block: p, div, etc.) */
  position: absolute; /* removes #right from the normal flow, and positions it in the top-left of #row */
  right: 0; /* aligns #right 0px away from the right side of #text */
}

Изображение

Ответ 7

Я сделал с небольшим количеством работ css.,

Примеры кода для HTML:

<div class="MainContainer"><p>Lorem ipsum...</p><div style="float: right;">ASDF!</div></div>

Примеры кода для CSS:

.MainContainer{
    width : 50%;
    padding : 15px !important;   
    text-align : center !important;
    border : 15px solid #000;
    position : absolute;   
}

.MainContainer div { margin-top : -7%; text-align:center !important;}

Чтобы увидеть его в действии:

http://jsfiddle.net/john_rock/tZzwA/

Я думаю, это поможет вам решить вашу проблему.

Ответ 8

Как говорили другие, вам нужно освободить второй div от потока, а затем переместить его. Установите абсолютный верх, такой же, как и наложение, чтобы восстановить правильное вертикальное положение. Попробуйте это (не то же самое, что и Каракас), см. Второе представление, чтобы показать, что центрирование верное:

<div style="border:1px solid red;width: 50%; padding: 15px; text-align: center;position: relative;">
    Lorem ipsum...
    <div style="position: absolute;right: 0;top: 15px;">ASDF!</div>
</div>
<div style="border:1px solid red;width: 50%; padding: 15px; text-align: center;">
    Lorem ipsum...
</div>

http://jsfiddle.net/huuanito/8N9BT/

Ответ 9

Код, который у вас есть, будет в значительной степени работать с несколькими небольшими изменениями.

• Второй div должен быть независимым и не вложенным в первый.
• Первый "div" должен плавать влево, а второй - вправо.

Это в значительной степени.

    <div style="width:50%; padding:15px; text-align:center; float:left;">
     Lorem ipsum...
 </div>

 <div style="float:right;">
     ASDF!
 </div>

Попробуйте!