-
ID:QGE05. さんの質問

CSSについて教えてください。
横並びにしたボックスを2段配置したいです。
ボックスの上下左右には固定幅で余白を入れたいです。
文章だと分かり難いと思いますので、回答で画像を添付します。
CSS3も利用して、このようなレイアウトは可能でしょうか。
アドバイス頂けると幸いです。
よろしくお願いいたします。

みんなの回答 2 件

ID:QGE05. さんの回答

このようなレイアウトを考えてます。
ID:Kqg9zV

<style>
.wrap{
padding:10px;
background-color: #eee;
overflow: hidden;
}
.box{
padding:10px;
background-color: #fff;
}
.box:nth-child(odd){
clear:right;
float:left;
margin-right:10px;
}
.box:nth-child(even){
float:right;
margin-bottom:10px;
}
.box:last-child{
margin-bottom:0px;
}
.red{
background-color: #ff0000;
}
.orange{
background-color: #ff9900;
}
.green{
background-color: #00cc00;
}
.blue{
background-color: #0099cc;
}
</style>

<div class="wrap">
<div class="box red">赤のボックス</div>
<div class="box orange">橙のボックス</div>
<div class="box green">緑のボックス</div>
<div class="box blue">青のボックス</div>
</div>

ID:QGE05.

早速のご回答ありがとうございます。
言葉足らずで申し訳ございません。
図に記載しておりましたが、文章の方に記載しておりませんでした。
カラーのボックスは全て可変で、ウインドウサイズにあわせて自動で伸び縮みできればと考えております。
その際に各カラーのボックスは全て同じ幅にしたいです。
display:box等を使用すると同じような表示が可能ですが、ボックス内に入れる文字数の違いによっては、横幅が異なるため困っております。

ID:Kqg9zV

お前さ、俺が書いたコード試したか？俺が書いたコードで90％ぐらいはできてるのに、全て出来上がりの「答え」を知りたいわけじゃないよな？

ID:Kqg9zV

まぁいいや。お前みたいなクズには答え書いたほうが早いな。以下を追加しろ。

.box{
width: 50%;
box-sizing: border-box;
}
.box:nth-child(even){
margin-right:-10px;
}

ID:QGE05.

私の説明不足且つ、表示されるコードを記載して頂いたのかと勘違いしておりました。
width:50%を指定するとmargin-right:10pxがあるため、横並びになりませんがnth-childでネガティブマージンを指定して横並びにしてるのですね。
こちらの指定方法も大変参考になりました。
私の勘違いでせっかくのアドバイスを無駄にしてしまい誠に申し訳ございませんでした。

ID:QGE05. さんの回答

私の説明不足でした。申し訳ございません。
再度、図を添付します。
各ボックスの横幅は可変でウインドウサイズにあわせて変わるようにしたいです。
また、ボックスの中に違う文字数を入れても、各ボックスの横幅は同じになるようにしたいです。
よろしくお願いいたします。
ID:PhwDzO

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ほしゃ</title>
<style>
body{
margin:0;
padding:0;
}
#container{
height:auto;
background:#ccc;
padding:5px;
}
#container:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.col{
width:50%;
float:left;
}
.col-child{
width:auto;
height:100px;
margin:5px;
}
.red{background:#C33;}
.orrange{background:#F63;}
.green{background:#399;}
.blue{background:#069;}
</style>

</head>
<body>

<section id="container">

<article class="col">
<div class="col-child red"></div>
</article>

<article class="col">
<div class="col-child orrange"></div>
</article>

<article class="col">
<div class="col-child green"></div>
</article>

<article class="col">
<div class="col-child blue"></div>
</article>

</section>

</body>
</html>

ID:PhwDzO

heightはアタリで100pxにしてる。
Macでやってる。IEで確認してない。

ID:PhwDzO

高さを揃えたければhightline.jsというのを足せば揃います。

ID:QGE05.

ご回答ありがとうございます。
ご回答いただいたのような親と子で半分の余白を指定するような発想がなく、大変参考になりました。
WinのIE11、FF、GCで問題なく表示されております。
誠にありがとうございました。

ID:PhwDzO

どういたしまして。
左右マージンはIE6など古いブラウザなどで解釈ちがうのでみた方がよいかもです。いかんせんMacなもので。前はそれがコワくて大枠には使わないようにしてました。
入れ子をセンタリングするのもテです。50％の中で、入れ子は95％とか。

ID:QGE05.

古いブラウザで使用する場合は、確認するようにします。
細かいアドバイスまでいただき、誠にありがとうございました。

最終更新日:2014-06-13 (5,239 views)

関連するトピックス

ページ上部に戻る