Q&A
display：ｔａｂｌｅ；がうまく適応できません。
下記の認識で正しいでしょうか？
※
display: tableは親ボックスにつける。display: table-cellはその子ボックスすべてにつける。
間違っているでしょうか？
認識
display: tableは親ボックスにつける。
display: table-cellはその子ボックスすべてにつける。
横に二列にはなったのですが、contents-wrapの上にpaddingらしき隙間が大きく開きます。
ＨＴＭＬ
<section class="main__about-me main-section multicolumn"> <div class="contents-wrap"> <h2 class="main__about-me__heading main__common-heading">ABOUT ME</h2> <p>福。</p> <p>パ。</p> </div><!-- /.contents-wrap --> <img class="my-image" src="img/index/myimage.png" alt="自身の写真"> </section><!-- /#about -->CSS
/* ---------------------------------------------------------
MainContent-Aboutme
----------------------------------------------------------*/
@media (min-width: 960px) {
.multicolumn {
display: table;
}
}
@media (min-width: 960px) {
.contents-wrap {
width: 50%;
display: table-cell;
}
}
.my-image {
margin-top: 2.8rem;
box-shadow: 1rem 1rem rgba(98, 206, 242, 1);
display: block;
}
@media (min-width: 960px) {
.my-image {
width: 50%;
box-shadow: 3rem 3rem rgba(98, 206, 242, 1);
display: table-cell;
}
}
/about-me/
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
下記のような認識だったのですが、trにあたる部分がないとうまくいかないのでしょうか？
all aboutより
*displayプロパティの値を変化させるだけで)段組を解除できます。
display: table-cell;をdisplay: block;にするだけで解除できる。
＊ 一番外側に、全体を囲むブロックが必須です。親要素？
<div class="cover"> <div class="box1"> 1段目 </div> <div class="box2"> 2段目 </div> <div class="box3"> 3段目 </div> </div>＊
外側を囲んでいるdiv要素(class名はcover)に、「この要素をテーブル(表組み)のように表示させる」という指示「display: table;」を加えます。
div.cover {
display: table;
margin: 0px;
padding: 0px;
width: 100%;
}
上記では、余白量をゼロにして、横幅全体に広がるよう装飾しています。これらの記述は、望みのレイアウトに合わせて修正して下さい。
width: 100%;で、tableに内包された、要素の合計が100%になるようになった。
この100のなかに中の要素を無理やり詰め込む。
＊
各段を構成するdiv要素(class名はbox1～box3)に、「この要素をテーブルのセルのように表示させる」という指示「display: table-cell;」と、望みの段幅(横幅)の指定を加えます。
div.cover div.box1 {
display: table-cell;
width: 45%;
}
div.cover div.box2 {
display: table-cell;
width: 30%
}
div.cover div.box3 {
display: table-cell;
}
上記では、1段目(左端の段)の横幅が45％、2段目(中央の段)の横幅が30％になります。最後の3段目(右端の段)には横幅を指定していません。ここではテーブル自体の横幅を100％にしているため、残りのすべての幅が3段目の表示に使われます。
回答1件
0
ベストアンサー
最終的にどのような画面を作りたいのかが不明なので、一般論として書きますと。
css3 の display 属性での table 系の指定は、table と table-cell だけでなく table-row も合わせて、3点セットで使います。これらの値の意味は、HTMLの table 系の各要素と以下のように対応しています。
display:table == <table> display:table-row == <tr> display:table-cell == <td>
なので、例えば下記のHTMLは・・・
HTML
1<div style="display:table"> 2 <div style="display:table-row"> 3 <div style="display:table-cell">Taro</div> 4 <div style="display:table-cell">Yamada</div> 5 </div> 6 <div style="display:table-row"> 7 <div style="display:table-cell">Hanako</div> 8 <div style="display:table-cell">Tanaka</div> 9 </div> 10</div>
テーブルの構成という観点では、以下と同じ意味になります。
HTML
1<table> 2 <tr> 3 <td>Taro</td> 4 <td>Yamada</td> 5 </tr> 6 <tr> 7 <td>Hanako</td> 8 <td>Tanaka</td> 9 </tr> 10</table>
この考え方が基本になっているということを出発点として、上記以外の display:table-xxxx 系のパラメーターの使い方は連想できそうな感じがしますが、いかがでしょうか？
投稿2016/01/07 14:33
総合スコア2425
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/01/07 14:52
2016/01/08 01:24
退会済みユーザー
2016/01/08 05:11