CSS: Align an element based on screen size

问题

So I'm writing a program that will need to resize elements based on the viewers screen size. The program is in jsp / sql/ xhtml / css and I have a few questions.

Is there any way to select a css file by saving the screen width to a jsp variable?

Is there a way to align a div below another div and use the above div as a sort of container for it? This question is a little complicated

Goal: To have an image with a text label underneath it. Problem: The div is part of a parent div, and the div serves an image that will changed based on the screen size.

Here's something like what I'm doing.

<div id="container">
<div id="inner">
    <div class="1">--stuff</div>
    <div class="2"><img src="server:8080/project?minutes=720&width=<%= out.print(width) %> </div> <-- want to align under this
    <div class="3">--stuff</div>
</div>
<div id="label"> <--Want this div aligned underneath "2"
    <div class="1">2.0</div> <-- Want the text at 25% of the image (right)
    <div class="2">4.0</div> <-- Want the text at 50% of the image (right)
    <div class="3">6.0</div> <-- Want the text at 75% of the image (right)
    <div class="4">8.0</div> <-- Want the text at 100% of the image (right)
</div>
</div>

回答1:

What you are wanting to do - Responsive Design - is very cool but also gets pretty complicated. It takes a bit of learning, but CodeSchool has a high quality course called Journey Into Mobile that covers adaptive screen sizes and should get you on the right track.

回答2:

You'll need to dig into Responsive design, Media Queries & Fluid layouts.
As mentioned above Codeschool does have a great course covering these areas.

来源：https://stackoverflow.com/questions/12010739/css-align-an-element-based-on-screen-size

标签

css

jsp

alignment