CODEWITHSUNDEEP
htmlcssflexbox
user56062
user56062

Reputation: 369

How to create a definition list with equalized definition terms of variable length?

I am trying to create a definition list (with the help of this guide) with its dt and dd elements having different content. Ofcourse i could hardcode a width for these elements, but i'd like to have the list takes the longest dt element and make its siblings to have its length. Also, when the content of the dd element is longer than the available space the new line must not begin below the dt element but rather where the dd element begins like on the second screenshot in this question.

I thought i could solve this with the display: flex attribute but stuck with a non-working solution. Is it not possible or am a on the wrong way?

Here is what i've got so far (fiddle):

HTML:

<dl>
   <dt>dt: Lorem Ipsum</dt>
   <dd>dd: Lorem imperdiet</dd>
   <dt>dt: Lorem id libero in Ipsum and so on and so on</dt>
   <dd>dd: Lorem id libero in ipsum dolor</dd>
   <dt>dt: Lorem Ipsum</dt>
   <dd>dd: I should be sitting to the right of the previous dt and not wrapping round below it.</dd>
   <dt>dt: Lorem id libero in Ipsum</dt>
   <dd>dd: Lorem in ipsum dolor</dd>
</dl>

CSS:

dl {
   display: flex;
   flex-flow: column nowrap;
}
dt {
   background: gold;
   display: flex;
   flex-flow: row wrap;
}
dd {
   background: yellowgreen;
   display: flex;
   flex-flow: row wrap;
   width: auto;
   margin: 0;
   padding: 0;
}

Upvotes: 7

Views: 1740

Answers (2)

luminancedesign
luminancedesign

Reputation: 362

I had a go with the DL:

https://jsfiddle.net/luminancedesign/0u0n39b9/

Uses :before / :after blocks for background striping - best with solid colour to avoid 'inline' shape outlining, e.g.

dt:nth-of-type(even) {background: silver;}
dd:nth-of-type(odd) {background: slategrey;}

and: 

dt:nth-of-type(even)::after {... background: darkgrey;}
dd:nth-of-type(odd)::before {... background: lightslategrey;}

I've used a width limit, to keep some 'aesthetic' to the display - having irregular blocks doesn't make for clear reading. However this is leading into tablular data layout and as mentioned above, a table may be more appropriate.

Upvotes: 0

actimel
actimel

Reputation: 451

I don't think that it is possible to archive what you are trying. Flexbox won't help at this case. You also cannot use display table and so on, because the dl syntax unfortunately lacks wrapping of dt+dd groups. You would have to use JS to calc widths of the dt elements, but it wouldn't be also so easy because of multiline variants.

But how about this a little bit modified "traditional" approach: make them min-width but allow the dt to overflow to the dd.

dl:after {
  content: '';
  display: block;
  clear: both;
}
dt {
  float: left;
  clear: left;
  padding-top: 1em;
  margin-right: 1em;
}
dd {
  padding-top: 1em;
  margin-left: 15em;
}

http://codepen.io/ThiemelJiri/pen/KrZrxG

Upvotes: 1

Related Questions