display:table;がうまく適応できません。
下記の認識で正しいでしょうか?
※
display: tableは親ボックスにつける。display: table-cellはその子ボックスすべてにつける。
間違っているでしょうか?
認識
display: tableは親ボックスにつける。
display: table-cellはその子ボックスすべてにつける。
横に二列にはなったのですが、contents-wrapの上にpaddingらしき隙間が大きく開きます。
HTML
<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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/01/07 14:52
2016/01/08 01:24
退会済みユーザー
2016/01/08 05:11