Az alábbi hasábtördelét csináltam, csak az a baj, hogy nagyon csúnyán tördeli a hasábok alján a listákat. Mit lehet tenni?
<style type="text/css">
div#multicols {height:100%; -moz-column-width:15em; -moz-column-gap:0;}
div.box {min-height:3em; margin:0.75em 0.5em; border-radius:1em; background:orange;}
ul {margin:0; padding:0; list-style-type:none;}
li, b {padding:0 0.5em;}
li:nth-child(odd) {background:deepskyblue;}
li:nth-child(even) {background:lightskyblue;}
</style>
</head>
<body>
<div id="multicols">
<div class='box'><b>title</b>
<ul>
<li>bla-bla-bla</li>
<li>bla-bla-bla bla-bla-bla</li>
<li>bla-bla-bla bla-bla-bla bla-bla-bla</li>
<li>bla-bla-bla bla-bla-bla bla-bla-bla bla-bla-bla</li>
<li>bla-bla-bla bla-bla-bla bla-bla-bla</li>
<li>bla-bla-bla bla-bla-bla</li>
<li>bla-bla-bla</li>
</ul>
</div>
<div class='box'><b>title</b>
<ul>
<li>bla-bla-bla</li>
<li>bla-bla-bla bla-bla-bla</li>
<li>bla-bla-bla bla-bla-bla bla-bla-bla</li>
<li>bla-bla-bla bla-bla-bla bla-bla-bla bla-bla-bla</li>
<li>bla-bla-bla bla-bla-bla bla-bla-bla</li>
<li>bla-bla-bla bla-bla-bla</li>
<li>bla-bla-bla</li>
</ul>
</div>
...
válasza:Nem vagyok biztos benne, hogy ez a probléma, de a div.box stílusához tedd ezt:
padding-bottom: 1em;
Ettől az alsó lekerekítés is látszani fog, a listák alja nem fogja kitakarni.
válasza:Így módosítsd a stílust:
div.box {min-height:3em; margin:0.75em 0.5em;}
div.box b {display: block; border-top-left-radius:1em; border-top-right-radius:1em; background:orange;}
A lényeg, hogy ne színezd a div boxot, csak a benne lévő elemeket, így az átlátszó marad, és a lista hasábtörésekor nem villan át a narancs szín a doboz alján.
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!