CSS：根据屏幕大小对齐元素 [英] CSS: Align an element based on screen size

问题描述

所以，我正在写一个程序，将需要调整基于观众的元素的屏幕尺寸。该计划是在JSP / SQL / XHTML / CSS和我有几个问题。

有没有办法通过保存屏幕宽度为JSP变量来选择一个CSS文件？

有没有办法对准下方另一个分区一个div，并使用上述股利作为一种容器呢？这个问题有点复杂

目标：有一个形象与它下面的文本标签。问题：股利是父DIV的一部分，并在div服务基础上，屏幕尺寸将改变图像

下面是像我在做什么。

 ＆LT; D​​IV ID =容器＆GT;
＆LT; D​​IV ID =内与GT;
    ＆LT; D​​IV CLASS =1＆GT;  - 东西与LT; / DIV＆GT;
    ＆所述;股利类=2＆GT;＆所述; IMG SRC =服务器：8080 /项目分钟= 720安培;宽度=＆其中;％=的out.print（宽）％＆GT;＆所述; /格＆GT;＆其中;  - 要根据本对齐
    ＆LT; D​​IV CLASS =3＆GT;  - 东西与LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =标签＆GT; ＆LT;  - 想该div对准下面2
    ＆LT; D​​IV CLASS =1＆GT; 2.0＆LT; / DIV＆GT; ＆LT;  - 在图像的25％所需的文本（右）
    ＆LT; D​​IV CLASS =2＆GT; 4.0＆LT; / DIV＆GT; ＆LT;  - 在图像的50％所需的文本（右）
    ＆LT; D​​IV CLASS =3＆GT; 6.0＆LT; / DIV＆GT; ＆LT;  - 在图像的75％所需的文本（右）
    ＆LT; D​​IV CLASS =4＆GT; 8.0＆LT; / DIV＆GT; ＆LT;  - 在图像的100％所需的文本（右）
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

你想要做什么 - 响应式设计 - 很凉爽，但也得到了pretty的复杂。这需要一些学习，但codeSchool拥有一支高素质的过程称为旅进入移动覆盖自适应屏幕尺寸，并应该让你在正确的轨道。

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>

解决方案

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.

这篇关于CSS：根据屏幕大小对齐元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！