Question

这里的第一个问题，也没有真正受过良好训练，所以如果我说错了，请告诉我！

我在我工作的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>

（当然有一个URL）

这没关系。我希望按钮显示在每个homecolumn部分的底部，而不是在任何文本的下方，以便它们在视觉上对齐，所以我尝试添加位置：相对;底部：0px;

在风格中，但它不会影响任何事情。将位置改为绝对肯定，但是＆＃34;底部：＆＃34;可以改变而不做任何事情。

此外，我还尝试在＆＃34; homebutton＆＃34;的样式标签中创建一个div id。使用与上面的代码相同的样式元素，所以我可以做，并添加一个链接显示在其中，但这不起作用。

#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;
}

我尝试过再次尝试类和ID的组合，没有运气。我试图将这个div放在div中并定位它时我做错了什么？

谢谢！

Answer 1

尝试此操作以获得3列效果。请注意，这不是一个响应设计解决方案，如果您想要有响应的内容，您必须使用媒体查询或响应式框架，这将使您的生活变得更加轻松。

HTML：

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

CSS：

.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;
}

DEMO

需要学习的东西：

任何值得他/她盐的前端工程师都会同意我的说法，使用Classes而不是ID来设置CSS中的HTML文档样式。出于各种原因，但最重要的原因是：

ID对于单个文档是唯一的，如果您想重用该样式，则需要一个Class才能正确有效地共享。
类允许级联，ID不允许。
清洁度与敬虔相关 - 当您是一个有组织的开发人员时，您总是可以在您的样式表中找到Javascript和Classes中的ID

在wordpress中将div定位在div中

1 个答案: