Question

我在尝试从数据库中显示的图像水平显示时遇到了一些麻烦。我尝试使用private void AddTreeNode(TreeNode parentNode, DataTable table, int parentId) { //filter rows, get all rows that have specified parent ID var filteredRows = table.AsEnumerable().Where(r => Convert.ToInt32(r["parent_id"]) == parentId).ToList(); //go through all those rows foreach(DataRow row in filteredRows) { //make treeview TreeNode node = new TreeNode(row["Re_nm"].ToString()); //add it to parent (first time that will be treeview) if (parentNode == null) tr.Nodes.Add(node); else parentNode.Nodes.Add(node); //now call same method second time, now with new node and parent id 151111 AddTreeNode(node, table, Convert.ToInt32(row["Re_id"])); //next time, this will be called with parent id 151112 etc. } }，但这似乎没有任何帮助。我也试着查看其他答案，但我的情况没有运气。

SqlDataAdapter

这是CSS：

DataTable table = new DataTable();

table.Columns.Add("Re_id", typeof(int));
table.Columns.Add("Re_nm", typeof(string));
table.Columns.Add("parent_id", typeof(int));

table.Rows.Add(new object[] { 151111, "region", 0 });
table.Rows.Add(new object[] { 151112, "yemen", 151111 });
table.Rows.Add(new object[] { 151113, "ibb", 151112 });
table.Rows.Add(new object[] { 151117, "saudi", 151111 });
table.Rows.Add(new object[] { 151118, "ryath", 151117 });

AddTreeNode(null, table, 0);

我不明白为什么它会垂直显示每张图片。

Answer 1

尝试这样的事情（我认为在原始代码btw中还有一个额外的结束div标签）

    $db = mysqli_connect("localhost", "root", "", "photos");

    $sql = "SELECT * FROM images ORDER BY RAND()";
    $result = mysqli_query($db, $sql);

    if( $result && mysqli_num_rows( $result ) > 0 ){
        echo '<div class="hero">';
        while ($row = mysqli_fetch_array($result)) {
            echo'
            <div class="row">
                <div class="social-img hide-750">
                    <div class="social-content">
                        <img src="img/'.$row["images"].'">
                    </div>
                </div>
            </div>';
        }
        echo '</div>';
    }

更改css规则以删除下面的类.hero-content似乎会产生更理想的结果

.hero {
  margin-top: -30px;
}
.hero .hero-content {
    margin: -10px auto 0;
  max-width: 1000px;
 /* padding: 50px 20px 170px;*/
}
.hero h1 {
  color: #000;
  font-family: 'Source Sans Pro', Arial, Sans-Serif;
  font-size: 26px;
  font-weight: 600;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
.hero h2 {
  color: #000;
  font-family: 'Source Sans Pro', Arial, Sans-Serif;
  font-size: 16px;
  font-weight: 200;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
.hero .row {
 /* margin-top: 60px;*/
}
.hero .row .social-img {
  background-color: #f5f5f5;
  border-color: #e5e5e5;
  border-style: solid;
  border-width: 0 1px 1px 0;
  display: inline-block;
  float: left;
  margin: 0 20px 80px;
  width: 29%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}
.hero .row .social-img .social-content {
  margin: 10px;
}
.hero .row .social-img .social-content img {
  margin-bottom: 10px;
  height: auto;
  width: 100%;
}
.hero .row .social-img .social-content p {
  color: #505e67;
  font-family: 'Source Sans Pro', Arial, Sans-Serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 20px;
  -webkit-font-smoothing: antialiased;
}
.hero .row .social-img .share .fa {
  color: #bababa;
  font-size: 20px;
  padding-right: 10px;
}
.hero .row .social-img .share .fa:hover {
  color: #f17e6f;
}

Answer 2

DIV是块元素，默认情况下它们的父元素的宽度为100％。你必须使这些容器成为内联块 - 但所有它们应该彼此相邻显示，而不仅仅是内部容器。

图像是垂直显示的，而不是水平显示？

2 个答案: