質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

3回答

2548閲覧

CSSで左右に要素を寄せて、それぞれ上下中央寄せにしたい

sequence

総合スコア29

float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/11/12 02:26

編集2022/01/12 10:55

やりたいこと

下記の図のように各要素を配置したいと考えています。
なお、青いボックスは赤いボックスにくっついても構わないです。
イメージ説明
コードは下記のようになります。

HTML

1<div class="clearfix"> 2 <div class="box_red"></div> 3 <div class="box_blue claerfix"> 4 <div class="box_green"></div> 5 </div> 6</div> 7<style> 8.box_red{float:left;} 9.box_green{float:right;} 10</style>

問題点

現状はbox_redとbox_blueをfloatを用いて左右に寄せているのですが、
そうすると、どうしてもbox_greenが中央に寄ってくれません。

それを改善する為のCSSの書き方を知りたいです。

考えられる手法

  1. display:inline-blockでpaddingで調整する
  2. display:table-cellを用いる
  3. display:flexを用いる

色々調べて、今回のようにするなら上記の方法しか思いつきませんでした。

まず、1は明らかに要件の変更に耐えられないのでやりたくないです。
そして、2はレスポンシブを考慮した時にスタイルの変更を加える必要があることとtableと関係ないところでtable-cellを利用することに抵抗があります。
最後に3ですが、IEに対応していないバージョンがあることから避けたいです。
IEの希望対応バージョン:8〜

ということから、上記の手法は利用したくないです。

そうなるとどういった方法で上図のようにスタイルを充てることができるのか
ご教授お願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/11/12 02:37

現状のCSSも追記ください。また、IEはどのバージョンまで対応させるつもりでしょうか。
sequence

2016/11/12 02:49

ご連絡ありがとうございます。追記致しました。宜しく御願い致します。
kei344

2016/11/12 02:56 編集

現状のCSSでは幅も高さもありませんが、全ての幅/高さが不定ということでしょうか。あと、blueに何も指定していませんね。
sequence

2016/11/12 03:19

失礼致しました。clearfixという指定をしており高さを出しております。widthとheightは内側の要素により可変にしようと考えております。
guest

回答3

0

こんにちは。
大体の概要だけ見てコードを書いてしまったので
やりたくない1の方法でやってしまいました、すみません。
とりあえず参考までにコードを載せておこうと思います。

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test</title> 6 <link rel="stylesheet" href="teratail.css" media="screen" title="no title"> 7 </head> 8 <body> 9 <div class="parent"> 10 <div class="box_red"></div> 11 <div class="box_blue"> 12 <div class="box_green"></div> 13 </div> 14 </div> 15 </body> 16</html> 17

css

1div.parent{ 2 border: 1px black solid; 3 width: 500px; 4 height: 300px; 5 font-size: 0 6} 7 8div.box_red{ 9 background: red; 10 height: 100%; 11 width: 50%; 12 display: inline-block; 13 margin-right: 0; 14} 15 16div.box_blue{ 17 background: blue; 18 height: 100%; 19 width: 50%; 20 display: inline-block; 21 margin-left: 0; 22} 23 24div.box_green{ 25 background: green; 26 height: 30%; 27 width: 100%; 28 position: relative; 29 top: 50%; 30 margin-top: -50px 31}

【結果】
イメージ説明

投稿2016/11/12 03:10

drumath2237

総合スコア91

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

tableと関係ないところでtable-cellを利用することに抵抗があります。

これは気にすることはないと思います。

tableと関係ないところにtable要素を使う、というのが一般的に忌避されるのは、HTML要素に使われる場合です。
かつてCSSがまだ万能ではなかった時代に、tableタグを駆使してレイアウトをしていた頃がありましたが、「HTMLは文書構造を記述するもので、デザインはCSSで制御すべき」というWeb標準の考えから、(デザインとしての)レイアウトを目的としたtableタグの使用が否定されるようになったのです。
なので、HTMLで本来tableではないところにtableタグを使うのはよろしくありませんが、デザインを制御するCSSにtable関連の記述をするのは、全く問題ないと思います。

flexレイアウトを使いたくない、ということであれば、tableを使うのが一番手っ取り早いと思いますので、活用することをオススメします!

投稿2017/07/26 00:37

miwakazuo

総合スコア52

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

CSS

1.box_red, 2.box_blue, 3.box_green { 4 position: relative; 5 height: 200px; 6 width: 400px; 7} 8.box_red{float:left;background-color: #d66;} 9.box_blue{float:right;background-color: #66d;} 10.box_green{background-color: #6d6;} 11 12.box_green { 13 height: 100px; /* 高さが固定できるなら */ 14 margin-top: -50px; 15 position: absolute; 16 top: 50%; 17} 18```**動くサンプル:**[https://jsfiddle.net/r25kxh1v/](https://jsfiddle.net/r25kxh1v/) 19 20 21```CSS 22.box_red, 23.box_blue, 24.box_green { 25 position: relative; 26 height: 20vw; 27 width: 40vw; 28} 29.box_red{float:left;background-color: #d66;} 30.box_blue{float:right;background-color: #66d;} 31.box_green{background-color: #6d6;} 32 33.box_green { 34 height: 10vw; 35 position: absolute; 36 top: 50%; 37 -webkit-transform: translate(0px, -50%); 38 -ms-transform: translate(0px, -50%); /* IE9 */ 39 transform: translate(0px, -50%); 40} 41```**動くサンプル:**[https://jsfiddle.net/r25kxh1v/1/](https://jsfiddle.net/r25kxh1v/1/)

投稿2016/11/12 03:08

kei344

総合スコア69357

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問