Break item via CSS with fixed number?

Question

I´ve got this list of items:

<div class="break-3">
<ul>
    <li>
    <div class="title">A</div>
    <div class="text"></div>
    </li>
    <li>
    <div class="title">B</div>
    <div class="text"></div>
    </li>
    <li>
    <div class="title">C</div>
    <div class="text"></div>
    </li>
    <li>
    <div class="title">D</div>
    <div class="text"></div>
    </li>
    <li>
    <div class="title">E</div>
    <div class="text"></div>
    </li>
</ul>
</div>

With no fixed height. Now I want with the class"break-3", that the list breaks / floats right after the 3rd element.

It should look like this:

A  D
B  E
C

How can I do that?

Thanks

.break-3 > ul > li{float:right;} .break-3 > ul > li:nth-child(1), break-3 > ul > li:nth-child(2), break-3 > ul > li:nth-child(3) {float:left;} — KYSSE, Sep 18 '18 at 11:06
This may help you https://stackoverflow.com/questions/14745297/how-to-display-an-unordered-list-in-two-columns — maximelian1986, Sep 18 '18 at 11:09

score 2 · Accepted Answer · answered Sep 18 '18 at 11:32

try this way

.break-3 {
    -webkit-columns: 100px 2; /* Chrome, Safari, Opera */
    -moz-columns: 100px 2; /* Firefox */
    columns: 100px 2;
}
li {list-style:none;}

<div class="break-3">
    <ul>
    <li>
    <div class="title">A</div>
    <div class="text"></div>
    </li>
    <li>
    <div class="title">B</div>
    <div class="text"></div>
    </li>
    <li>
    <div class="title">C</div>
    <div class="text"></div>
    </li>
    <li>
    <div class="title">D</div>
    <div class="text"></div>
    </li>
    <li>
    <div class="title">E</div>
    <div class="text"></div>
    </li>
    </ul>
</div>

Thx but how do i set the number of items where it should break? — Lydia Maier, Sep 18 '18 at 11:37

score 0 · Answer 2 · answered Sep 18 '18 at 11:09

You can target them all

.break-3 > ul > li{
  YOUR CSS
}

Then you can target just the first 3 to tell them to not do what the others are doing

.break-3 > ul > li:nth-child(1),
.break-3 > ul > li:nth-child(2),
.break-3 > ul > li:nth-child(3) {
  YOUR CSS
}

score -1 · Answer 3 · answered Sep 18 '18 at 11:06

-1

you can not break from third element but you can do it this way

ul li{
    display:inline-block;
    width:calc(50% - 4px);
}

answered Sep 18 '18 at 11:06

raviramani

522
2
14

That's the opposite of what he wanted – zmuci Sep 18 '18 at 12:45

Break item via CSS with fixed number?

3 Answers3