Question

简单的代码，我尝试了各种方法，但我无法更改div内的文本位置，这是另一个div！？

HTML：

<div class="left_container">

<?php 
$i=1;
while($i<=6)
{
echo "<br><div class='data_block'><img src='g.jpg' class='data_image'/><span class='.data_title'>TOPIC TITLE HERE</span></div>";    
$i++;   
}
?>

</div>

CSS：

.left_container
{
    background-color:;
    margin-left:5%;
    margin-top:5%;
    width:70%;
    height:1000px;
    overflow:scroll;
}

.data_block
{
    background-color: white;
    width:95%;
    height:20%;
    border:solid 1px #006666;
    margin-left:auto;
    margin-right:auto;
}

.data_title
{
    font-size:18px;
    font-family:Nevis;
    margin-left:500px;
}

我想重新定位“TOPIC TITLE HERE”，设置左边距，保持在中心位置。但没有任何作用！文本位于div的下半部分！？为什么呢？

编辑：错误是class =“。data_title”，我纠正了它但仍有问题！现在文本显示在div之外了！

Answer 1

使用 . （点）定义类不合适，应为class='data_title'。

更改

class='.data_title'

到

class='data_title'

您还应该将float: left添加到CSS中。

Answer 2

更改此

class='.data_title'

到

class='data_title'  and

<div class="aleft_container">

</div>

您还必须修改您的CSS，即更改您的班级名称。

.aleft_container
{
    background-color:some-color;
    margin-left:5%;
    margin-top:5%;
    width:70%;
    height:1000px;
    overflow:scroll;
}

.data_block
{
    background-color: white;
    width:95%;
    height:20%;
    border:solid 1px #006666;
    margin-left:auto;
    margin-right:auto;
}

.data_title
{
    font-size:18px;
    font-family:Nevis;
    margin-left:500px;
}

Answer 3

将班级名称class=".datablock"更改为class="datablock"。

然后添加您的定位代码。

修改

为您的班级样式添加float: left;或display: block;。

文本没有留在div，这是在另一个div内？

3 个答案: