如何以特定的顺序显示来自sql数据库的内容

-2

我是新来的这（php & SQL），我有一点问题。这里是：如何以特定的顺序显示来自sql数据库的内容

来自数据库的内容显示为块元素，而不是我希望它内联显示。

这里是图：http://i.stack.imgur.com/69VUe.jpg

这里是代码：

风格：

.article { 
     width:300px; 
     position:relative; 
    } 
    .article h2 { 
     padding:10px; 
     font-size:24px; 
     text-align:right; 
    } 
    .article img { 
     width:100%; 
     margin:10px 0; 
    } 
    .article p { 
     font-size:14px; 
     text-align:justify; 
    }

-php：

 <?php 
$con=mysqli_connect("localhost","root","###","db-proba"); 
// Check connection 
if (mysqli_connect_errno()) 
    { 
    echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
    } 

$result = mysqli_query($con,"SELECT * FROM article_1"); 
; 



while($row = mysqli_fetch_array($result)) 
    { 
    echo "<div class='article'>"; 
    echo "<h2>" . $row['naslov'] . "</h2>"; 
    ?> 
    <img src="images/<?php echo $row['slika']; ?>" /> 
    <?php 
    echo "<p>" . $row['tekst'] . "</p>"; 

    echo "</div>"; 
    } 

mysqli_close($con); 
?>

什么想法？在此先感谢！

来源

2014-02-07 user3283235

您是否尝试过编辑CSS以显示：'他们'内联;'？ – Amber

 

.article { 
    float: left; 
}

使用floats使您的内容坐并排侧（这里是一个小提琴http://jsfiddle.net/D75Hb/）

来源

2014-02-07 10:43:36 Alex

谢谢你，我已经尝试了除此之外的所有东西:)，它工作。 – user3283235

@ user3283235“一切”，真的吗？ [flexbox]怎么样（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes）？ – feeela

的问题是不相关的PHP或SQL - 这是一个CSS问题。

元素是以块还是内联方式显示取决于display属性。你可以设置这样一来inline或inline-block：

.article { 
    display: inline-block; 
}

实现类似的效果的另一种方式是设置元件是一个块元素（其为DIV浏览器默认值）和使用浮动。但浮动处理有点复杂。

.article { 
    float: left; 
}

无论哪种方式，你也必须指定所需的宽度。要获得两个相同大小的列，每个块需要50％的宽度来填充整个宽度。请记住，在默认框模型中，仅针对内容测量宽度 - 添加填充和边框。但是现在你可以改变盒子模型。一个更完整的解决方案可能是这样的：

.article-wrapper { 
    width: 600px; 
    max-width: 100%; // shrink on small screens, i.e. make it fluid 
} 
.article { 
    display: inline-block; 
    width: 50%; 
    box-sizing: border-box; 
    padding: 1em; 
} 
.article h2 { 
    font-size: 2.2em; 
    text-align: right; 
} 
.article img { 
    width: 100%; 
    height: auto; 
} 
.article p { 
    text-align: justify; 
}

如何以特定的顺序显示来自sql数据库的内容

回答

相关问题