How can I dynamically change element's width related with parent width using only CSS? [closed]


Tags: javascript,jquery,html,css3

Problem :

I'm trying to make dynamically changed layer according to it's parent element's width using only CSS. In specific, let's suppose that a parent element called element A and childs are label a, label b, ..

If element A width is in 500px<=x px<1000px, then set label ?'s width equal to 200px.

If element A width is in 250px<=x px<500px , then set label ?'s width equal to 125px.

..

How can I do this? If it's not possible with only CSS, then what do I need?

Sorry about terrible english anyway;;



Solution :

I don't think you can do it in css alone. But you can use jQuery. A simple if condition would suffice.

var width = $('selector').width();
if (width > 500 && width < 1000) {
    $('label').css('width', '200px');
}

    CSS Howto..

    How to select an element's great-grandchild for CSS rules?

    How to use pure CSS to show an animation of one element's background and color property?

    How to make a progress bar

    How to vertically align both image and text in a DIV using CSS?

    How to change html background dynamically

    How to access an svg inner id and have CSS change the fill color of that id?

    How to reference embedded images from CSS?

    Showing refresh button when animation is complete?

    How to check if a TR contains a TD with a specific CSS class with jquery?

    How to center absolute div (text) above relative div (image) responsively?

    how to get the height of a user's device in html

    How to design “overflowing” border lines of css
    ?

    How to check the CSS hyphens in effect using Chrome developer tools?

    How to set negative z-index with jQuery?

    Can someone explain in detail how the clear works in this code?

    How to scale content for displays keeping the ratio [closed]

    inline svg - how to apply browser default styles to xhtml in foreignObject?

    How can I select the item that doesn't have attribute [duplicate]

    How to override element.style height

    How to style the

    How to make a navigation bar have equal spacing?

    How to put CSS and HTML in one page of code? [duplicate]

    How to pass to next line that cutted elements in a list?

    CSS how to make a fixed height?

    How can I archive this responsive design?

    How do I make the mobile view of my website not show certain elements?

    How to center content vertically with unknown content and fixed layout

    In javascript, jQuery, or css how do I get a div or iframe to expand to fill rest of space

    how to make the background the same as the div size in css

    How do I align something in a in the top-left corner - without aligning everything?