cssのブロック左寄せに関して

質問です

現在Weｂページを開発していまして

2つの
文章の塊を<div>で囲って
それにクラスIDをそれぞれ振り分けて

最初の文章の塊を

css
1
2
3.aaa{
4  float:right;
5  text-align:center;
6}

と書きまして

次の文章の塊を

css
1
2.aaa2{
3  float:right;
4  text-align:center;
5}
6
7

とコーディングしました
しかしこれですと
文書の塊は確かに

最初の文章の塊から
どんどん後続に左回りに回り込んでいくのですが

最初の文章の塊が
右側に詰められてしまいますので
そこで、最初の文書の塊を中央に配置して
そこから、左側にどんどん詰めていくようにしたいです。

図としては

○＝文章の塊

↓現在

左中央右

                 ○○○

これを

左中央右

     ○○○○

という感じにしたいです。

しかしながら
ネットで調べてもそのやり方は全く出てこないので
苦戦しております。

どなたか、お分かりになる方
ご教示お願い致します。

それでは、回答お待ちしております。

kei344

2016/05/05 13:40

図か何かで表現していただけると状況が把握しやすいのですが、可能ですか？また、コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

kei344

2016/05/05 14:23

図示ありがとうございます。「○○○○」は「[4][3][2][1]」でしょうか。また、横幅いっぱいまでになった場合はどういう順番になるかもお願いできますか？

aKusano

2016/05/06 05:26

>そこで、最初の文書の塊を中央に配置してそこから、左側にどんどん詰めていくようにしたいです。ここが今ひとつよくわからないので、作りたいレイアウトを画像にしてUPできませんか？

行動規範の内容に同意します

回答1件

こんにちは。

html
1<article>
2  <section>１１１１１１１１１１１１１１１１１１１１１１１１１１</section>
3  <section>２２２２２２２２２２２２２２２２２２２２２２２２２２２２２</section>
4  <section>３３３３３３３３３３３３３３３３３３３３３３３３３３３３３</section>
5  <section>４４４４４４４４４４４４４４４４４４４４４４４４４４</section>
6</article>

css
1article{
2  position:relative;
3  left:50%;
4  transform: translateX(-50%);
5  display: inline-block;
6}
7section{
8  display:inline-block;
9  float:right;
10  width:100px;
11}

こんなかんじでしょうか？

それか

css
1article{
2  position:relative;
3  /*display:-webkit-box;*/
4  
5  /*変更*/
6  display:-webkit-flex;
7  display:flex;
8  /****/
9
10  -webkit-box-direction:reverse;
11  -webkit-box-pack: center;
12}
13section{
14  width:100px;
15}

等の方法もあるかと思います。

投稿2016/05/06 03:40

編集2016/05/06 05:53

kogure

総合スコア299

kei344

2016/05/06 04:26

display: box; は古い仕様なので、flexboxを使ったほうが良いのでは？【box-flex - CSS | MDN】 https://developer.mozilla.org/en-US/docs/Web/CSS/box-flex 【CSSのdisplay: box;ってどうなったんだっけ問題 - 俺、サービス売って家買うんだ】 http://www.ie-kau.net/entry/2015/08/04/CSS%E3%81%AEdisplay%3A_box%3B%E3%81%A3%E3%81%A6%E3%81%A9%E3%81%86%E3%81%AA%E3%81%A3%E3%81%9F%E3%82%93%E3%81%A0%E3%81%A3%E3%81%91%E5%95%8F%E9%A1%8C 【flexboxの旧仕様、改定仕様、現行仕様の一覧 « LINE Engineers' Blog】 http://developers.linecorp.com/blog/?p=2479

kogure

2016/05/06 05:58

kei344さんありがとうございます！！そーなんですね。（回答、追加修正します。）＠hackeronrailsさんもし、2案目使うようなら http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html とか見れば理解しやすいかもです。