最後に3つのコンテナを右に移動して上に移動するにはどうすればよいですか？

-1

最後の3つのコンテナを右に移動して上に浮かそうとしましたが、左に消えました。コンテナを上に移動させるために使用できるcss3プロパティはありますか？私はHTMLマークアップを追加することはできません、htmlは同じままにしておかなければなりません。最後に3つのコンテナを右に移動して上に移動するにはどうすればよいですか？

<div id="forums"> 
    <ul class="forum-directory"> </ul> 
    <!-- .forums-directory --> 
    <div class="pagination"> </div> 
    <ul class="topics"> </ul> 
    <!-- #bbp-forum-1861 --> 
    <div class="pagination"> </div> 
    <div class="topic-form"> </div> 
    <aside class="forum-sidebar widget_display_forums"> </aside> 
    <aside class="forum-sidebar widget_display_topics"> </aside> 
    <aside class="forum-sidebar widget_display_stats"> </aside> 
</div> 

<style> 
.forum-sidebar{width: 28%; 
float: right; 

right: 0px; 
clear: right;} 

.forum-directory, .pagination, ,topics, .topic-form {width: 70%; clear: left; float: left;} 
</style>

出典

2017-09-13 brody

私はこれを言うことを憎むが、あなたがHTMLを変更せずにこの問題を解決することができれば、私は正直わかりません。明らかな答えは、2つのコンテナdivに並べて配置したいものを配置し、次にそれらを互いに隣に浮かべることです。

.large-container { 
 
    box-sizing: border-box; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
.forum-sidebar { 
 
    border: solid black 1px; 
 
    height: 20px; 
 
    width: 10px; 
 
    margin: 10px; 
 
} 
 

 
.forum-directory, .pagination, .topics, .topic-form { 
 
    border: solid black 1px; 
 
    height: 20px; 
 
    margin: 10px; 
 
    padding: 0; 
 
    width: 40px; 
 
} 
 

 
.containerOne { 
 
    display: inline-block; 
 
    width: auto; 
 
} 
 

 
.containerTwo { 
 
    display: inline-block; 
 
    width: auto; 
 
}

<html> 
 
<head></head> 
 
    <body> 
 
    <div class="large-container"> 
 
     <div class="containerOne"> 
 
     <div class="pagination"></div> 
 
     <ul class="topics"></ul> 
 
     <div class="topic-form"></div> 
 
     </div> 
 
     <div class="containerTwo"> 
 
     <aside class="forum-sidebar widget_display_forums"></aside> 
 
     <aside class="forum-sidebar widget_display_topics"></aside> 
 
     <aside class="forum-sidebar widget_display_stats"></aside> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

私はHTMLを修正する含まれていません。これについての答えになど興味があります：または（私の好み）、このように、インラインブロックを使用しています。一種の無回答です。

出典

2017-09-13 20:49:17 taraleemason

最後に3つのコンテナを右に移動して上に移動するにはどうすればよいですか？

答えて

関連する問題