Skip to content

Instantly share code, notes, and snippets.

@motsu0
Created February 1, 2020 15:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save motsu0/79fcfc005efd412321425b58e6b52b3c to your computer and use it in GitHub Desktop.
Save motsu0/79fcfc005efd412321425b58e6b52b3c to your computer and use it in GitHub Desktop.
<!-- 左カラム(固定幅)、右カラム(可変幅) -->
<div class="parent">
parent
<dl class="sample3">
<dt class="lc">吾輩は猫である</dt>
<dd class="rc">吾輩は猫である。名前はまだ無い。<br>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</dd>
<dt class="lc">坊っちゃん</dt>
<dd class="rc">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</dd>
</dl>
<div class="clear"></div>
</div>
<!-- 左カラム(固定幅)、右カラム(残りの幅) -->
<div class="parent">
parent
<dl class="sample3 v2">
<dt class="lc">吾輩は猫である</dt>
<dd class="rc">吾輩は猫である。<br>名前はまだ無い。</dd>
<dt class="lc">坊っちゃん</dt>
<dd class="rc">親譲りの無鉄砲で小供の時から損ばかりしている。</dd>
</dl>
<div class="clear"></div>
</div>
.sample3 .lc{
clear: left;
float: left;
width: 8.5em;
}
.sample3 .rc{
float: left;
width: auto;
max-width: calc(100% - 8.5em);
}
.sample3.v2 .rc{
width: calc(100% - 8.5em);
}
.clear{
clear: left;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment