Question

嗨我有这个图片库和信息，应该在图片的右侧看到。我把他们两个漂浮在左边。我的默认分辨率是1366 x 768.结果没问题。但如果我将其更改为1024 x 768，信息会继续下降，我需要将信息保留在图像的右侧，即使其他用户具有不同的分辨率。这是代码，有人可以帮助我吗？

HTML

<div id="home_page_images">
    <div id="home_page_images_slider">
        <img src="images/accred_images/image_1.JPG" alt="In the office with the evaluators" />
        <img src="images/accred_images/image_2.JPG" alt="Evaluating faculties" />
        <img src="images/accred_images/image_3.JPG" alt="CCS students OJT" />
        <img src="images/accred_images/image_4.JPG" alt="Packaging of hard documents" />
        <img src="images/accred_images/image_5.JPG" alt="Meeting of the evaluators" />
    </div>
</div>
<div id="home_page_content_frame">
    <div id="home_page_content">
        <span>Welcome to the QCE and CCE Evaluation System</span>
        <p>The CCE Evaluation process, also known as "Accreditation", is a voluntary, non-governmental process that includes an external review of a professor’s ability to provide quality programs. It is helpful in many aspects, from ensuring that students are learning relevant material to allowing a school access to funding. Accreditation reviews include self-evaluations, peer-reviews, committee-reviews, and the development of in-depth strategic plans. They also include reviews of a school’s mission, faculty qualifications, and curricula.</p>
    </div>
</div>

CSS

#home_page_images {
   position: relative;
   width: auto;
   margin-top: 40px;
   margin-left: 40px;
   float: left;
}

#home_page_content_frame {
   float: left;
   width: auto;   
}

#home_page_content p {
   text-align: justify;
   position:relative;
}

Answer 1

在你的div上，你可以使用百分比而不是像robobobobo所说的像素，但是如果你是为移动设备制作它，你可能会想要使用媒体查询，因为移动设备很小，如果你决定使用某些东西像桌面设备的50％，它将是非常小的，媒体查询的例子：

#div {
    width:375px;
}
@media screen and (min-width: 1366px) {
    #div {width:375px;}
}
@media screen and (min-width: 1440px) {
    #div {width:428px;}
}
@media screen and (min-width: 1600px) {
    #div {width:434px;}
}
@media screen and (min-width: 1920px) {
    #div {width:540px;}
}

将(min-width: 1920px)部分更改为您希望代码出现的最小或最大尺寸。

保持不同分辨率的位置

1 个答案: