对齐块右边界，但维持浮动左项目

这里是我从片断看，你可能会看到它不同，具体取决于您的设备上：对齐块右边界，但维持浮动左项目

更新：我想实现的是：

只使用CSS我要像漂浮在左侧面板的块，但在右侧面板中的所有块打右边。

.container { 
 
    background-color: wheat; 
 
    display: table; 
 
    overflow: hidden; 
 
} 
 

 
.inner { 
 
    border: 1px solid green; 
 
    display: table-cell; 
 
    overflow: hidden; 
 
    width: 50%; 
 
} 
 

 
.right { 
 
    text-align: right; 
 
} 
 

 
ul { 
 

 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
li { 
 

 
    border: 4px solid grey; 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div class="container"> 
 
    <div class="inner"> 
 
       <ul> 
 
      <li>one</li> 
 
      <li>two</li> 
 
      <li>three</li> 
 
      <li>four</li> 
 
      <li>five</li> 
 
      <li>six</li> 
 
       
 
     </ul> 
 
    </div> 
 

 
    <div class="inner right"> 
 
     <ul> 
 
      <li>one</li> 
 
      <li>two</li> 
 
      <li>three</li> 
 
      <li>four</li> 
 
      <li>five</li> 
 
      <li>six</li> 
 
       
 
     </ul> 
 
    </div> 
 

 
</div>

来源

2015-07-28 Neil

你想让块从右侧包裹？ –

您的请求尚不清楚。你希望你的'li'在面板的** right **上浮动吗？但是在'li'的** left **里包含的文本* align？ –

@RedBreast我已经添加了一个图像来显示我想要达到的效果。 – Neil

这样吗？

如果是这样，添加text-align: left;到您的UL

.container { 
 
    background-color: wheat; 
 
    display: table; 
 
    overflow: hidden; 
 
} 
 

 
.inner { 
 
    border: 1px solid green; 
 
    display: table-cell; 
 
    overflow: hidden; 
 
    width: 50%; 
 
} 
 

 
.right { 
 
    text-align: right; 
 
} 
 

 
ul { 
 

 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    text-align:left; 
 
} 
 

 
li { 
 

 
    border: 4px solid grey; 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div class="container"> 
 
    <div class="inner"> 
 
       <ul> 
 
      <li>one</li> 
 
      <li>two</li> 
 
      <li>three</li> 
 
      <li>four</li> 
 
      <li>five</li> 
 
      <li>six</li> 
 
       
 
     </ul> 
 
    </div> 
 

 
    <div class="inner right"> 
 
     <ul> 
 
      <li>one</li> 
 
      <li>two</li> 
 
      <li>three</li> 
 
      <li>four</li> 
 
      <li>five</li> 
 
      <li>six</li> 
 
       
 
     </ul> 
 
    </div> 
 

 
</div>

来源

2015-07-28 11:42:39 Andrew

这实际上是'.right'类的要点，不是这样做的。 –

我不认为这是OP想要的，因为他们说_仅使用CSS我希望块像左侧面板一样浮动，但容器刷新到右侧面板._。 –

@HiddenHobbes对不起，我不擅长英语。容器刷新到右侧面板的含义是什么？ – Andrew

尝试增加text-align:left;到贵丽代替。

编辑：Fiddle

来源

2015-07-28 13:47:28

对齐块右边界，但维持浮动左项目

回答

相关问题