Question

首先关闭。是的，我已经阅读了多个相同问题的帖子，但没有一个对我有效。我会尝试发布尽可能多的信息，这些信息与问题有关。为什么我自己无法修复它。

我正在制作托管服务网站设计，我正在尝试创建包含价格和我们提供的产品的盒子。我还没有完成这些盒子的设计，因为我过于专注于页面的响应性。

这是我遇到的问题：https://i.gyazo.com/84050e458f93acf0ddefdb189bc886c0.mp4

这是我的CSS：

#packages h2 {
color: rgb(0, 0, 0);
}

#package1 {
position: absolute;
top: 85vw;
left: 25vw;
transform: translate(-50%, -50%);
margin-left: 1px;
margin-right: 1px;
padding-left: 10px;
padding-right: 300px;
padding-bottom: 500px;
background-color: #8DB255;
}

#package2 {
position: absolute;
top: 85vw;
left: 50vw;
transform: translate(-50%, -50%);
margin-left: 1px;
margin-right: 1px;
padding-left: 10px;
padding-right: 300px;
padding-bottom: 500px;
background-color: #8DB255;
}

#package3 {
position: absolute;
top: 85vw;
left: 75vw;
transform: translate(-50%, -50%);
margin-left: 1px;
margin-right: 1px;
padding-left: 10px;
padding-right: 300px;
padding-bottom: 500px;
background-color: #8DB255;
}

这是HTML代码：

 <section id="packages">
    <div id="bg_image2">
    </div>
    <ul>
        <div id="package1">
            <h2>
                <?php echo $package1_title; ?>
            </h2>
        </div>
        <div id="package2">
                <h2>
                    <?php echo $package2_title; ?>
                </h2>
        </div>
        <div id="package3">
            <h2>
                <?php echo $package3_title; ?>
            </h2>
        </div>
    </ul>
</section>

如果需要，这是带有文本的PHP文件：

// PACKAGES CONFIG
$package1_title = "1GB";
$package2_title = "3GB";
$package3_title = "5GB";

也要耐心等待，因为我不是那么好。我听说问题是我的填充和边距等。因为我刚刚投入代码，因为它工作，我没有想到它。但现在是长期的。由于我在开始时的想法，我遇到了很多错误。

如果您需要更多信息，请询问。如有必要，我会尝试提供更多代码和信息。

Answer 1

https://jsfiddle.net/cqLLa20n/我创造了一个你想要的小提琴。而且你也不需要任何绝对的位置。你应该学习基础知识

<html>
<body>
<section id="packages">
    <div id="bg_image2">
    </div>
    <div id="list">
        <div id="package1">
            <h2>
                1gb
            </h2>
        </div>
        <div id="package2">
                <h2>
                   2gb
                </h2>
        </div>
        <div id="package3">
            <h2>
               5gb
            </h2>
        </div>
    </div>
</section>
</body>
</html>

Answer 2

是否有理由将视频宽度移至顶部？我个人只会用填充来移动它。而不是必须将其移动到顶部然后向左移动然后转换 - ＆gt;

package x {
  display: block;
  margin-left: 25vw; //whatever ratio you need it to be centered

}

祝你好运!!

在我的网页上制作div响应

2 个答案: