Question

我正在尝试创建两列。一列在左侧，另一列在右侧。这两列有一个图像和文本。而不是让每个图像和文本在一个单独的行上变成它自己的块，图像和文本在两列之间叠加在一起。我该如何解决这个问题？

PHP / HTML

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="test.css"?parameter="3"/>
    </head>

    <?php
        $resultSet = $db->query("SELECT * FROM Articles");

        if ($resultSet->num_rows != 0)
        {
           while ($rows = $resultSet->fetch_assoc())
           {
            $id = $rows["id"];
            $images = $rows["image"];
            $text = $rows["text"];

            echo "<div id=body>";
            if ($id > 3 && $id < 8)
            {
                echo "<div id=left>";
                echo "<img src=$images>";
                echo "<p>$text</p>";
                echo "</div>";  
            }

            if ($id > 8)
            {
                echo "<div id=right>";
                echo "<img src=$images>";
                echo "<p>$text</p>";
                echo "</div>";  
            }
            echo "</div>";  
           }
        }
 ?>

CSS

#body{
    position: relative;
    margin: 0 auto;
    width: 85%;
    height: auto;
}

#left{
    position: absolute;
    left: 0%;
    width: 28.33%;
    display: block;

}

#left img{
    width: 100%;
}

#right{
    position: absolute;
    right: 0%;
    width: 28.33%;

}

#right img{
    width: 100%;
}

Answer 1

1。）添加单数＆＃39;你周围的引号是echo语句中的属性值 echo "<img src='path-to-img'>";

2。）如果只有2列，那么左框的css应为

 `{position:relative; float:left;width:50%} ,
  {position:relative; float:right;width:50%}`

为右框。从那里你可以选择绝对定位图像或文本对齐：将框中心或任何你想要的东西放在那里。

3。）命名id='body'是不好的做法，你应该重命名它。

4.。）将CSS设置为display:block，而不仅仅是其中一个div（左/右）

Answer 2

首先，有很多东西被添加，不需要。那说，试试这个：

#left{
  width: 28.33%;
  display: inline-block;
  float: left;

}

#right{
  width: 28.33%;
  display: inline-block;
  float: left;
}

图像堆叠在一起？

2 个答案: