Php 在我的页面上创建div_Php_Html_Css_Responsive

Php 在我的页面上创建div

php html css

Php 在我的页面上创建div,php,html,css,responsive,Php,Html,Css,Responsive,首先。是的，我读过多篇有相同问题的帖子，但没有一篇适合我。我会尽可能多地发布与问题相关的信息。为什么我不能自己修好我正在做一个托管服务网站的设计，我正试图创造框，这将包括价格和我们提供的。我还没有完成这些框的设计，因为我太专注于页面的响应性这就是我遇到的问题：这是我的CSS： #packages h2 { color: rgb(0, 0, 0); } #package1 { position: absolute; top: 85vw; left: 25vw; transform: tr

首先。是的，我读过多篇有相同问题的帖子，但没有一篇适合我。我会尽可能多地发布与问题相关的信息。为什么我不能自己修好

我正在做一个托管服务网站的设计，我正试图创造框，这将包括价格和我们提供的。我还没有完成这些框的设计，因为我太专注于页面的响应性

这就是我遇到的问题：

这是我的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>

也要有耐心，因为我不是那么好。我听说问题是我的填充物和边距等。。因为我刚刚输入了代码，而且它起作用了，所以我没有想到它。但现在从长远来看。由于一开始的思考，我遇到了很多错误

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

我创建了一个你想要的东西。而且你不需要任何你在那里的绝对位置。你应该学习基础知识

<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>


1gb
2gb
5gb

是否有理由将其移动到视图宽度的顶部？我个人会用填充物来移动它。而不必将其移动到顶部，然后向左移动，然后变换->

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

}

祝你好运

主要问题是绝对位置。。。您正在使用一种不好的方式来创建布局，使您的内容脱离流。。。我想你正在寻找3列设计，看看如何简单地实现你可能想看看Bootstrap如何在他们的一个新例子中实现这一点：Tieson，完美的例子！非常感谢。也谢谢Temani，我会看的！

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