cssのレイアウト

Question

上記のような構成で1ラインとして1ラインを1リンクとして、下方向に並べていきたいです。

display-inlineでもうまくいかず、
display-tableでも上下のマスを連結することはできず
floatでもタイトルが長くなった時に高さを合わせるのがわからず、
目標の構成が達成できずで苦労しています。

解決方法のヒントだけでもいいので教えていただけるとありがたいです。

Answer 1

こんな感じでどうですか？
左側のセルの高さは右側のセルの高さより大きくなることは無い仕様であると思われますので、
単に左右のセルをdisplay:table-cellで仮想テーブルにすれば良いと思います。

<div class="box">
  <a href="#">
  <div class="box-left">
    3文字
  </div><!-- /.box-left -->
  <div class="box-right">
       <p class="title">適当なタイトル適当なタイトル適当なタイトル適当なタイトル</p>
	   <p class="sub">補足となる文</p>
  </div><!-- /.box-right -->
  </a>
</div><!-- /.box -->

* { /*簡易リセット*/
	margin: 0; 
	padding: 0; 
}
.box {
	width: 500px;
	border: 1px solid #000;
}
.box a {
	display: table;
	color: #000;
	text-decoration: none;
}
.box-left {
	display: table-cell;
	width: 30%;
	padding: 10px;
	background: #ccdd33;
	vertical-align: middle;
	text-align: center;
	border-right: 1px solid #000;
}
.box-right {
	display: table-cell;
	width: 70%;
}
.box-right >p {
	padding: 10px;
}
.box-right .title {
	border-bottom: 1px solid #000;
}
.box-right .sub {
	text-align: right;
}

Comments

[makibi5577]

素晴らしいです。レイアウトの方法とても勉強になりました。

Answer 2

こんなのはイメージに近いですか？

<section id="wrapper">
<div id="left">
    <span>3文字</span>
</div>
<div id="right">
    <div>適当なタイトル</div>
    <div>備考となる文</div>
    <div>適当なタイトル</div>
    <div>備考となる文</div>
</div>
</section>

#right div, #left{
    width:99px;
}
#right div, #left{
    border-bottom:1px solid;
}
#wrapper{
    display:flex;
    width:201px;
    flex-wrap:wrap;
    align-items:stretch;   
}
#left{
    display:flex;
    align-items:center;
    border:1px solid;
    border-right:none;
}
#right{
    border:1px solid;
    border-bottom:none;
}

http://jsfiddle.net/sjx8w9wc/1/

Comments

[makibi5577]

コードとリンクありがとうございます。とても参考になります。

Answer 3

まず左のboxで1つと右の2段のboxで1つという風に分類するのでは駄目ですか？
左のboxはheight:autoにすれば良いですし、あとは大枠のdivをaで囲むだけです。

Comments

[makibi5577]

回答ありがとうございます。参考になりました。