Html 在wordpress中将div定位到div中

第一个问题在这里，也没有真正训练好，所以如果我问错了，就让我知道

我在一个Wordpress网站的丛林里工作，在那里谁知道以前是谁在管理它。我提到Wordpress是因为我觉得我以前遇到过一些奇怪的问题，比如无法创建有序列表，在CSS中找不到任何可以阻止它的东西

我的任务是设计一个新的主页，我试图制作一个2行3列的网格，以便更好地显示我们提供的所有内容，更加平等。因此，如果任何人都有一个简单的选择，这就是理想的最终结果。：）

我一直在使用div并让它们掉下来，我一直很幸运：

#homecolumn {
    width:29%;
    float:left;
    padding:10px; 
    text-align: center;
    height:450px;
    overflow: visible;
    position: relative;  
}

在样式部分中，列出了六个部分，每个部分中有不同的内容。它按需要布置

（撇开问题不谈：我的印象是这是div类的情况，因为我想多次使用它。但当我尝试使用类时，它只显示为一个列表blob。）

在每个homecolumn部分中，我都有一个按钮，当前编码为：

<div>
<a style="background-color: #0088cc; border-radius: 10px; color: #fff; font-  family: helvetica, sans-serif; font-size: 18px; font-weight: 500; padding: 10px 30px; text-decoration: none;" target="_blank" href="">Learn More</a>
</div>

我尝试了一些组合，再次尝试类与ID，但没有运气。我试图把这个div放在一个div中并定位它，这有什么错呢

---

谢谢大家!

尝试此操作以获得3列效果。请注意，这不是一个响应性的问题 设计解决方案，如果你想要一些响应性强的东西，你必须采用媒体查询或响应性强的框架，这将使你的生活变得更加轻松

HTML:

需要学习的东西：

任何一位称职的前端工程师都会同意我的说法，使用类而不是ID在CSS中为HTML文档设计样式。出于各种原因，但最重要的是：

• ID对于单个文档是唯一的，如果您想重用该样式，您将需要一个类来正确有效地共享
• 类允许级联，ID不允许
• 清洁近乎神圣——当你是一名有组织的开发人员时，你可以在Javascript中找到ID，在样式表中找到类

---

你能把相关的HTML和CSS放在代码笔或jsbin中，并将其包含在问题中吗？你能展示一下

#homebutton

与

链接的关系吗？使用类。如果你的类不工作是因为你的css中有错误。另外，删除

font-

和

family

之间的空格。在这种情况下，将代码放在codepen中可能没有帮助，因为在这个wordpress页面上，一切看起来都不一样。我不知道这是否有意义，但我不喜欢分享实际页面，因为它是为了工作。我希望我能访问后端，这样我就可以直接编辑页面文件了。类确实不能正常工作，所以我想我将深入研究主样式表。谢谢大家的建议！非常感谢你的好榜样！不幸的是，我认为问题有点深，所以我不得不改变策略。使用您的示例代码会发生这种情况：但奇怪的是，如果我将它们从类更改为ID，情况会好一点。。。。无论是哪种方式，按钮格式化都没有出现。是否使用响应框架（Bootstrap、Button等）？当您用F12检查源代码时，您看到这些框呈现沿这些行的代码<代码> @媒体（宽度：768 px）{ HooCopLuange{宽：100%；}}//>。看起来它覆盖了我编码的26%的宽度，RWD框架会这样做，以确保它们以一定的宽度堆叠。我会仔细看看，但你知道为什么它在重用ID时工作得更好吗？这似乎也不正确。如果不检查代码，很难知道，但我99.9999%肯定ID在某个地方分配了一些样式，影响了这一点。这是ID改变前端样式的唯一方法。除了javascript硬编码属性之外。

#homebutton {
    position: relative;
    bottom: 0px;
    background-color: #0088cc;
    border-radius: 10px;
    color: #fff;
    font-family: helvetica, sans-serif;
    font-size: 18px;
    font-weight: 500;
    adding: 10px 30px;
    text-decoration: none;
} 

<div class="container">
    <div class="row">
        <div class="homecolumn">
            <div class="content">
                <p>Anything here</p>
            </div>
            <a href="#" class="button">Button</a>
        </div>
        <div class="homecolumn">
            <div class="content">
                <p>Anything here</p>
            </div>
            <a href="#" class="button">Button</a>
        </div>
        <div class="homecolumn">
            <div class="content">
                <p>Anything here</p>
            </div>
            <a href="#" class="button">Button</a>
        </div>
    </div>
    <div class="row">
        <div class="homecolumn">
            <div class="content">
                <p>Anything here</p>
            </div>
            <a href="#" class="button">Button</a>
        </div>
        <div class="homecolumn">
            <div class="content">
                <p>Anything here</p>
            </div>
            <a href="#" class="button">Button</a>
        </div>
        <div class="homecolumn">
            <div class="content">
                <p>Anything here</p>
            </div>
            <a href="#" class="button">Button</a>
        </div>
    </div>
</div>

.container{
    width:900px;
    position:relative;
    margin:0 auto;
    background:#ddd;
}
.row{
    position:relative;
    display:inline-block;
    width:100%;
}
.homecolumn{
    width:26%;
    margin:0 15px;
    padding: 18px;
    background:#999;
    float:left;
    text-align:center;
}

 .button{
    background-color: #0088cc;
    border-radius: 10px;
    color: #fff;
    font-family: helvetica, sans-serif;
    font-size: 18px;
    font-weight: 500;
    padding: 10px 30px;
    text-decoration: none;
}