如何以特定的順序顯示來自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; 
}

相關鏈接：

來源

2014-02-07 10:44:30 feeela

這可能會實現：

.article { 
     width:300px; 
     position:relative; 
     display:inline-block; 
    }

來源

2014-02-07 10:44:43 Fredd

如何以特定的順序顯示來自sql數據庫的內容

回答

相關問題