36

考虑以下 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 解决方案。

4

7 回答 7

22

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

于 2015-08-09T16:39:04.893 回答
16

一个元素不能inline-block同时浮动。

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

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

当您说您希望元素同时浮动时，我仍然不太确定您在想象什么视觉效果inline-block，但是浮动布局在水平和垂直位置方面与布局不同inline-block，并且没有t 任何方式来组合它们。

于 2012-11-10T14:16:23.560 回答
9

既然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>

于 2017-09-12T10:33:17.737 回答
6

应用于text-align: right父 div

于 2018-01-13T21:05:02.410 回答
1

如果您想在不使用浮动的情况下使其父元素的右侧对齐，您可以使用 CSS3 box-flex 属性。这是一篇关于如何使用它的示例的帖子： 如何在右侧对齐 inline-block 元素？

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

于 2014-01-27T15:26:27.117 回答
0

我个人会不惜一切代价避免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;
        }
于 2015-05-04T03:59:23.663 回答
-1

帮助解决这个问题可能为时已晚，但以防万一有人偶然发现，给你。Paul D. Waite，回答了您问题的根源。我想我知道你想要达到的目标。我做了一些“错误”的事情来做到这一点，以防万一你绝望并且想要避免使用 Flexbox。保持你的最后一个元素内联块，并浮动：对。并将其添加到其中。.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;}

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

于 2014-10-29T19:57:13.093 回答