从数据库中的数据设计一个相反的布局+循环答案

【问题标题】：Design an opposite layout + loop from data from database从数据库中的数据设计一个相反的布局+循环
【发布时间】：2017-10-08 15:42:13
【问题描述】：

我的目标：是设计一个布局，其中一个图像浮动到右边，文本在左边.如附图所示。

我正在使用 while 循环从我的数据库中查询数据来执行此操作
使用此代码：

       // establish a connection
        $db     = Database::getInstance();
        $mysqli = $db->getConnection();

        // run sql
        $sql = "SELECT * FROM `solutions` WHERE 1 LIMIT 6";
        // run query
        $result = $mysqli->query($sql);

        // echo '<pre>'.var_export($result, TRUE).'</pre>';

        // check query
        if($result){
            // echo '<pre>'.var_export($row, TRUE).'</pre>';
            while($row = $result->fetch_assoc()){
                echo '
                <span class="solution">
                    // this section floats right
    <div style="background-image:url('.$row['img_thumbnails'].'); " class="solution-img"></div><a href="solutions.php?key='.$row['solution_key'].'"><h2>'.$row['name'].'</h2></a>
                        <p>'.$row['headline_title_hook'].'</p>
                        </span>';
            }

        }else{
            trigger_error('SQL has an error');
        }

我面临的问题是格式化代码以执行附加的布局。

an opposite layout looped from database

【问题讨论】：

你好。 “在你的问题正文中，首先扩展你在标题中的摘要。解释你是如何遇到你试图解决的问题的，以及阻碍你自己解决的任何困难。”和“包含足够的代码以允许其他人重现问题”stackoverflow.com/help/how-to-ask

标签： html css database loops layout

【解决方案1】：

我想出了一行 css 的解决方案

.solution-wrapper .solution-left{ width:50%; float: left; clear:both; }

.solution-wrapper:nth-of-type(odd) .solution-left{float:right;}

我认为这与 PHP 或来自数据库的东西有关，但这是简单的 css 选择器技巧。

谢谢https://css-tricks.com/examples/nth-child-tester/#

【讨论】：