Question

考虑以下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解决方案，如果有的话。

Answer 1

我遇到了同样的问题，发现在容器上使用direction: rtl;是最好的解决方案。 https://css-tricks.com/almanac/properties/d/direction/

Answer 2

元素不能是inline-block并且同时浮动。

当元素设置为inline-block时，它与display:inline元素的不同之处在于它可以指定宽度和高度。但是，它仍然是内联布局流程的一部分 - 其水平位置由其源顺序和其块级父级的text-align属性决定，其与该行的垂直位置由{{1}确定} property。

当元素浮动时，它不再是内联布局流程的一部分。它的水平位置取决于它是浮动vertical-align还是left，以及它之前是否还有其他浮动元素，其垂直位置由Eric Meyer描述的相当复杂的规则集确定在 CSS：权威指南中，但基本上归结为“如果没有浮动则会出现在内联框中的顶部”。

我还不太清楚当你说要同时浮动元素和right时你想象的视觉效果，但浮动布局与inline-block布局不同在水平和垂直位置方面，并没有任何方法将它们结合起来。

Answer 3

将text-align: right应用于父div

Answer 4

如果要在不使用float的情况下将其父元素右侧对齐，可以使用CSS3 box-flex属性。这是一篇关于如何使用它的示例： How to align on the right an inline-block element?

标记它是CSS3解决方案，因此与所有浏览器不兼容（指向IE9 - ）

Answer 5

由于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>

Answer 6

帮助解决这个问题可能为时已晚，但万一有人偶然发现这一点，请你走了。 Paul D. Waite回答了你问题的根源。我想我知道你想要实现的目标。我已经做了一些“错误”的事情来实现这一点，以防万一你绝望而且你想避免使用Flexbox。保持你的最后一个元素inline-block，并且float：right。并将其添加到它。。去年-元件在你的行

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

同样，这不是正确的方法，但它有效......

Answer 7

我个人会不惜一切代价避免float: right并提供展示，但这是我的偏好。除了诉诸必要的绝对定位之外，我还没有找到更好的方法来做到这一点。虽然为此目的，它可能会使display: inline-block无用，但它通常会在这些场景中产生预期的效果。一个例子是（使用您的代码作为指导）一个标题，标识的位置就好像＆＃34;浮动＆＃34;向左，ul定位好像＆＃34;漂浮＆＃34;右。

      <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;
        }

如何实现浮动：保持内联块显示的正确效果？

HTML：

CSS：

7 个答案: