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 slow down the last few frames in a CSS sprite animation?

    How to get inner and outer width to a single element?

    How to wrap text using CSS? [duplicate]

    How do I create a 'linklist' like a tooltip with HTML and CSS or jQuery and CSS?

    How to remove
     tag

    How do I make a CSS triangle with smooth edges?

    How to add a hover transition effect on the navigation?

    How do I use CSS to reposition this image?

    How are these websites full-screened in the browser with a learn more button at the bottom (moves you into automatically down the page) [closed]

    How to get the current year using css?

    CSS animation - How to fill in “starting from border”?

    How to insert line breaks between numbers and content in ordered list

    show play icon on image hover

    How to allow scroll on mobile

    How to set height to wrap text only in certain screen size

    How can I compute a percentage based margin with LESS css?

    How to re-render a page from a Google Chrome extension?

    How can I delete this “a” space under the images using CSS?

    How to prevent the loading of background image in each page?

    How can I disable shrinking/resiziing images in Twitter Bootstrap?

    How to make my HTML suitable for Mobile View

    how to add inline css to rails link_to helper

    CSS Button Animation - How to Accomplish?

    How can I create a nav bar with a repeat image inside?

    How to add a background to a boostrap grid row (including padding!)?

    How to push content div to footer div while keeping background in the picture

    How to identify is a blog post has been selected or not?

    How to build a completely static multipage website with BEM?

    How to prevent long text from flowing out of a container

    How to change background image with static css and maintain it?