Question

我有以下html / css：

左侧看起来就像我想要的那样，但我的问题是KKK出现在左侧区块下方。我希望它们是内联的，但是KKK在右侧。我的CSS出了什么问题？有一个更好的方法吗？基本上，我希望最外层的父div占据屏幕的100％，左边的div由一些由垂直线分隔的文本组成，右边有自己的内联文本。

<div style="display:inline-block;width:100%;">
  <div style="width:100%;">
      <div style="display:block;display:table;">
        <div style="float:left;padding-right:20px;font-size:2.7em;">
          XXX
        </div>
        <div style="float:right;padding-left:20px;border-left:1px gray solid;">
          <div style="font-size:1em;">YYY</div> 
          <div style="font-size:1.8em;">ZZZ</div> 
        </div>      
      </div>
      <div style="float:right;">KKK</div>

  </div>
</div>

Answer 1

以下是解决方案。使用display: inline-block;和vertical-align: top;

请勿使用<div style="display:block;display:table;">两种显示类型。

<div style="display:inline-block;width:100%;"> 
  <div style="width:100%;">
      <div style="display: inline-block;"> <!-- Here is the change -->
        <div style="float:left;padding-right:20px;font-size:2.7em;">
          XXX
        </div>
        <div style="float:right;padding-left:20px;border-left:1px gray solid;">
          <div style="font-size:1em;">YYY</div> 
          <div style="font-size:1.8em;">ZZZ</div> 
        </div>      
      </div>
      <div style="display: inline-block;float:right;vertical-align: top;">KKK</div> <!-- Here is the change -->

  </div>
</div>

<强> Working Fiddle

注意：使用内联css是不好的方法。创建类并将css提供给类。

Answer 2

不确定我是否理解正确，但你想要像

这样的东西

   |yyy
XXX|ZZZ
   |KKK

？如果是这样，这很有效。

<div style="display:inline-block;width:100%;">
  <div style="width:100%;">
      <div style="display:block;display:table;">
        <div style="float:left;padding-right:20px;font-size:2.7em;">
          XXX
        </div>
        <div style="float:right;padding-left:20px;border-left:1px gray solid;">
          <div style="font-size:1em;">YYY</div> 
          <div style="font-size:1.8em;">ZZZ</div>
          <div>KKK</div>
        </div>      
      </div>
   </div>
</div>

如果没有，你能澄清你想要做什么吗？

Answer 3

嗨，所以我读了你的问题，基本上你想要＆＃39; KKK＆＃39;与你的div在同一行，所以我认为你只需要添加一个浮动：＆＃39; left＆＃39;在你的第3个div开始的css，这是一个例子：

```

        <div style="display:inline-block;  width:100%;">
            <div style="width:100%;">
                <div style="**float:left;**  display:block;   display:table;">
                </div>
            </div>
        </div>

``` 这解决了这个问题，P.S我个人不知道为什么你不能创建一个单独的CSS文件并使用类将它添加到你的html中。

如何让正确的div与左侧div正确对齐？

3 个答案: