jQuery —设置子项以填充父项的剩余宽度

Question

I am building a responsive layout. I would like to know if anyone knows a way through JS/jQuery which I can set children to fill the remaining space of a parent only if there is space to fill (to the right).

Layout when above 900px

Layout when below 900px

HTML for reference

 .row { width: 100%; } .colm-span-2 { position: relative; float: left; margin: 15px auto; padding: 0px 15px 0px 15px; background-color: #FFFFFF; background-clip: content-box; } .colm-span-2 { width: 33.3333333333%; } @media screen and (max-width: 900px) { .colm-span-2 { width: 50%; } } 

 <div class="row"> <div class="colm-span-2"> <div class="bg-white"> <div class="cont-span-1"> <h2>Test</h2> <p>Lorem ipsum</p> </div> </div> </div> <div class="colm-span-2"> <div class="bg-cta-green"> <div class="cont-span-1"> <h2>Test</h2> <p>Lorem ipsum</p> </div> </div> </div> <div class="colm-span-2"> <div class="bg-dark-purple"> <div class="cont-span-1"> <h2>Test</h2> <p>Lorem ipsum</p> </div> </div> </div> </div> 

Answer 1

I would suggest adding:

.colm-span-2:last-child {
    width: 100%;
}

to your media query. This will change the final .colm-span-2 to have a 100% width.

Answer 2

With flexbox and :last-child (assuming you have rows) this is possible

 * { margin: 0; padding: 0; box-sizing: border-box; } ::before, ::after { box-sizing: inherit; } .bg-white { background: whitesmoke; } .bg-cta-green { background: green; } .bg-dark-purple { background: rebeccapurple; } .row { display: flex; } .colm-span-2 { flex: 0 0 33%; margin: .25em; border: 1px solid grey; } .colm-span-2:last-child { flex: 1; } 

 <div class="row"> <div class="colm-span-2"> <div class="bg-white"> <div class="cont-span-1"> <h2>Test</h2> <p>Lorem ipsum</p> </div> </div> </div> </div> <div class="row"> <div class="colm-span-2"> <div class="bg-white"> <div class="cont-span-1"> <h2>Test</h2> <p>Lorem ipsum</p> </div> </div> </div> <div class="colm-span-2"> <div class="bg-cta-green"> <div class="cont-span-1"> <h2>Test</h2> <p>Lorem ipsum</p> </div> </div> </div> <div class="colm-span-2"> <div class="bg-dark-purple"> <div class="cont-span-1"> <h2>Test</h2> <p>Lorem ipsum</p> </div> </div> </div> </div> <div class="row"> <div class="colm-span-2"> <div class="bg-white"> <div class="cont-span-1"> <h2>Test</h2> <p>Lorem ipsum</p> </div> </div> </div> <div class="colm-span-2"> <div class="bg-cta-green"> <div class="cont-span-1"> <h2>Test</h2> <p>Lorem ipsum</p> </div> </div> </div> </div>