Как добиться эффекта float: правый эффект, сохраняя отображение встроенного блока?

Рассмотрим следующий jsFiddle: http://jsfiddle.net/mark69_fnd/yqdJG/1/

HTML:

<div id="container">
    <div class="char">
        AAA
    </div>
    <div class="char stickToRight">
        BBB
    </div>
</div>​

CSS

#container {
    border:solid 2px green
}
.char { 
    display: inline-block;
    border: solid 2px red;
}
.stickToRight {
    float: right
}​

Есть ли другой способ сделать выравнивание .stickToRight правильным, не плавая?

Мне нужно сохранить его как display:inline-block, чтобы я мог сделать его вертикальное выравнивание согласованным с другими элементами .char.

Как я могу достичь эффекта выравнивания справа float:right, сохраняя элемент display:inline-block? (Обратите внимание, что я не знаю ширины элемента контейнера.)

Я бы хотел чисто CSS-решения, если они есть.

Ответы

Ответ 2

Элемент cant должен быть inline-block и плавать одновременно.

Когда элемент установлен в inline-block, он отличается от элементов display:inline тем, что он может иметь указанную ширину и высоту. Однако его неподвижная часть потока встроенного макета - его горизонтальное положение определяется его порядком источника и свойством text-align его родительского уровня блока, а его вертикальное положение с линией определяется свойством vertical-align.

Когда элемент перемещается, он больше не является частью потока встроенного макета. Его горизонтальное положение определяется тем, имеет ли его плавающий left или right, и есть ли перед ним другие плавающие элементы, а его вертикальная позиция определяется довольно сложным набором правил, которые Eric Meyer очень хорошо описывает в CSS: Окончательное руководство, но это в основном сводится к "верхней части встроенного окна, в котором оно появилось бы, если оно не было плавающим".

Im все еще не совсем уверен, какой визуальный эффект вы воображаете, когда говорите, что хотите, чтобы элемент был плавающим, и inline-block в то же время, но макет поплавка отличается от макета inline-block как по горизонтали, так и по вертикали, и нет никакого способа их комбинировать.

Ответ 3

Если вы хотите выровнять справа от родителя элемент без использования float, вы можете перейти к свойству CSS3 box-flex. Вот сообщение с примером о том, как его использовать: Как выровнять по правому краю элемент встроенного блока?

Отметьте, что это решение CSS3 и, следовательно, несовместимо со всеми браузерами (точка в IE9 -)

Ответ 4

Возможно, слишком поздно, чтобы помочь в этом, но на всякий случай кто-то спотыкается об этом, вот и все. Paul D. Waite, ответил на источник вашей проблемы. Кажется, я знаю, чего вы пытаетесь достичь. Я сделал что-то "не так", чтобы выполнить это на случай, если вы отчаялись, и вы хотите избежать Flexbox. Сохраните последний элемент inline-block и поплавок: справа. и добавьте это к нему.

.last-element-in-your-row {
    display: inline-block;
    float: right;
    /*add this to stick that guy on the right*/
    position: relative;
    right: 0;
    top: 0;
}

Опять же, это не правильный путь, но он работает...

Ответ 5

Я лично избегал float: right и отображал бы дисплеи любой ценой, но это мое предпочтение. Я не нашел лучшего способа сделать это, кроме как прибегнуть к необходимому злу, которое является абсолютным позиционированием. Хотя для этой цели он может сделать display: inline-block бесполезным, он обычно дает желаемый эффект в этих сценариях. Примером может быть (используя ваш код в качестве ориентира) заголовок с логотипом, расположенным как "плавающий" влево, а ul позиционируется как "плавающий" справа.

      <div class="container">
        <h1>Logo</h1>
        <ul>
          <li> Link 1 </li>
          <li> Link 2 </li>
        </ul>
      </div>

Основной CSS:

   .container {
     max-width: 1200px;
     width: 100%;
     margin: 0 auto;
     position: relative;
     padding: 0 15px;
     box-sizing: border-box;
   }
   .container h1 {
     display: inline-block;
   }
   .container ul {
      padding: 0;
      margin: 0;
      display: inline-block;
      position: absolute;
      right: 15px; /* I use 15px to replicate the 15px padding on the container*/
   }
   .container ul li {
      display: inline-block;
   }

Это сценарий, в котором я чаще всего использую этот код. В большинстве случаев в содержании у меня есть процентная ширина для моих контейнеров, что устраняет необходимость (большую часть времени) для позиционирования. IE:

       <div class="container">
          <div class="left"></div>
          <div class="right"></div>
       </div>


       .container {
           max-width: 1200px;
           width: 100%;
           margin: 0 auto;
        }
        .left {
           display: inline-block;
           width: 60%;
           margin-right: -4px; /* I use this because I've noticed a 4px spacing when using inline block sometimes */
        }
        .right {
          display: inline-block;
          width: 40%;
          margin-right: -4px;
        }

Ответ 6

Так как элемент inline не может float, мы не сможем создать какой-либо сложный макет. Затем был представлен flexbox, и теперь у нас есть мощная технология, которая может решить большинство проблем макета. Чтобы достичь ожидаемого результата, просто выполните следующие действия:

#container {
  border: solid 2px green;
  display: flex;
}

.char {
  border: solid 2px red;
  ;
}

.float-right {
  margin-left: auto;
}
<div id="container">
  <div class="char ">
    AAA
  </div>
  <div class="char float-right">
    BBB
  </div>
</div>

Ответ 7

Применить text-align: right к родительскому div

Ответ 8

У меня была такая же проблема, она была решена с помощью таблицы с одной строкой:

<table class="spread">
    <div> 
        <tr>
          <td><div>                 To left  </div></td>
          <td><div class="toRight"> To right </div></td>
        </tr>
    </div>
</table>

CSS: 

.spread{
  width: 100%;
}
.toRight{
  display: inline-block;
  float: right;
}