メインカラムの2カラム化を３カラム化

私だったら下記のようにします。

HTML

<div class="Trisects">
  <div class="Trisect">
    <div class="Trisect-left">左側です。</div>
  </div>
  <div class="Trisect">
    <div class="Trisect-center">真ん中です。</div>
  </div>
  <div class="Trisect">
    <div class="Trisect-right">右側です。</div>
  </div>
</div>

CSS

.Trisects {
  display: flex;
}

@media screen and (min-width: 639px) {
  .Trisect {
    flex: 0 1 33.333333%;
  }
  .Trisect-left, .Trisect-center, .Trisect-right {
    margin: 0 8px;
  }
}

@media screen and (max-width: 639px) {
  .Trisects {
    flex-wrap: wrap;
  }
  .Trisect {
    flex: 1 0 100%;
    margin-bottom: 8px;
  }
}

余白や 639pxのブレークポイントはサイトに合わせてご変更ください。

• この返信は8年、 6ヶ月前にわいひらが編集しました。理由: クオートの修正

あらー…。

クォーテーションが変換されていない。

なるほどです！参考にさせていただこっと(*^^*)

私もやっちゃったんで、アップだけ＞＜

<div class="half-half cf">
  <div class="half-l">吾輩は猫である。名前はまだ無い。
  どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</div>
  <div class="half-r">私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。よそよそしい頭文字などはとても使う気にならない。</div>
  <div class="half-rr">私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。よそよそしい頭文字などはとても使う気にならない。</div>
</div>

HTMLは上記のとおり。※わいひらさんのを丸々使わせて頂きました＾＾；

CSSは以下の通りです。※Androidのスマホ、PCビューで表示確認。

/*メインカランの3カラム化*/
.half-rr{
  margin: 1em 0;
}
.half-l,
.half-r{
  width: 33%;
}

.half-rr{
  float: right;
  width: 33%;
  box-sizing: border-box;
}

@media screen and (max-width:639px){
  .half-l,
  .half-r,
  .half-rr{
    float: none;
    width: auto;
    padding: 0;
  }
}

CSSは親テーマにあるスタイルを使用。追記した感じです。

AMP対応するなら、Akiraさんの方が良いんでしょうかね？コード全部書いてるので。

Akiraさん、かうたっくさん

ありがとうございます！
まだ公開していないテストサイトのためURL記載できないのですが、
今わいひらさんの装飾コードをつかって書いているのでかうたっくさんのコードでまず
やってみました。

half-rrは一番右ではなくて真ん中に表示、half-rは真ん中ではなく一番右端でしょうか？

ひだりからhalf-l→half-r→half-rrとおもってやってみたところ、
half-l→half-rr→half-rとなりました。

Akiraさん

かうたっくさんのコードでうまく表示されたのですが（なぜか真ん中と右側が逆になってしまいますが）
Akiraさんのコードでも試してみようとトライ中です。

>>クォーテーションが変換されていない。

はどこを修正すればよいでしょうか？
今はそのままコピペだと縦一列に表示されました。

クォーテーションは、” です。

改めて見返すと、T より t が良いため修正しています。

HTML

<div class="trisects">
  <div class="trisect">
    <div class="trisect-left">左側です。</div>
  </div>
  <div class="trisect">
    <div class="trisect-center">真ん中です。</div>
  </div>
  <div class="trisect">
    <div class="trisect-right">右側です。</div>
  </div>
</div>

CSS

.trisects {
  display: flex;
}

@media screen and (min-width: 639px) {
  .trisect {
    flex: 0 1 33.333333%;
  }
  .trisect-left, .trisect-center, .trisect-right {
    margin: 0 8px;
  }
}

@media screen and (max-width: 639px) {
  .trisects {
    flex-wrap: wrap;
  }
  .trisect {
    flex: 1 0 100%;
    margin-bottom: 8px;
  }
}

ホントだぁ、、、テスト環境整ってない状態では、チェックもおろそかになって、ボロボロでした＾＾；

悔しいwでも残念ながら、あれは色々問題あるので使えません

別の方法試すのは、テスト環境出来上がってから。一人でコッソリとリベンジします！

Akiraさんの

<div class="Trisects">&quot;を"に変更すればOKです！

最悪だぁ笑
色々かぶりましたね！

修正前の書いちゃいました

かうたっくさんの方法は、もう1つ CSS を指定すると上手くいきます。

かうたっくさんの CSS に下記の CSS も加えます。

.half-r{
  float:left;
}

これで左から half-l → half-r → half-rr になります。

float も Flexbox もほぼ同じ見た目になるので、お好きな方をご選択ください。

そうですねっ、ありがとうございます(*^^*)
フロートでやり直したんですけど、アップしない方が良いと思ってたけど、それじゃダメだと思って再訪問しました＾＾；

/*メインカランの3カラム化*/
.half-l,
.half-r{
  float: left;
  width: 33%;
  padding-right: 10px;
}

.half-rr{
  margin: 1em 0;
  box-sizing: border-box;
  float: left;
  width: 33%;
}

@media screen and (max-width:639px){
  .half-l,
  .half-r,
  .half-rr{
    float: none;
    width: auto;
    padding: 0;
  }
}

HTML

<div class="half-half cf">
<div class="half-l">吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</div>
<div class="half-r">私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。よそよそしい頭文字などはとても使う気にならない。</div>
<div class="half-rr">333333333
私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。よそよそしい頭文字などはとても使う気にならない。</div>
</div>

今回は平気だとおもいますけど、テスト環境に不安ありは変わってません、、

おかげさまで何とかテスト環境で実装できました！
まだ準備中で早く公開できることを楽しみにしつつ準備しています。
これを機にもっと勉強して自由にカスタマイズできるようになりたいと思います。
ありがとうございました！