對齊塊右邊界，但維持浮動左項目

這裏是我從片斷看，你可能會看到它不同，具體取決於您的設備上：對齊塊右邊界，但維持浮動左項目

更新：我想實現的是：

只使用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

對齊塊右邊界，但維持浮動左項目

回答

相關問題