Question

所以这是我的问题。我在我的界面上使用一些ui-grid来显示信息，但我希望并排显示2列3列并排（垂直对齐）。到目前为止，我还没有找到它的例子，我试图编写它，但没有成功。在这里有人有更好的经验，那么我知道它有可能吗？到目前为止，这就是我对解决方案的看法：

<ul data-role="listview" data-inset="true" data-icon="false">
    <li data-role="list-divider">
            <div class="ui-grid-b" style="width: 50%">
                <div class="ui-block-a">Header 1</div>
                <div class="ui-block-b">Header 2</div>
                <div class="ui-block-c">Header 3</div>
            </div>
            <div class="ui-grid-b" style="width: 50%; float: right">
                <div class="ui-block-a">Header 1</div>
                <div class="ui-block-b">Header 2</div>
                <div class="ui-block-c">header 3</div>
            </div>
    </li>
</ul>

我只是尝试将两张桌子并排放在一起：https://jsfiddle.net/8o39tqgz/1/

修改

刚试过显示：内联，但它不能在同一行上运行...... https://jsfiddle.net/s71zpcgs/

Answer 1

我猜它不完全是我想要的，但那样做会。 Ty给@ezanker寻求解决方案：

<强> HTML

Dim s as Worksheet
For each s in Worksheets

    if s.Name like "NC*" and not s.Name = "NCToday" then
         s.Name = "NC"
    end if

next

<强> CSS

<div data-role="page" id="page1">
<div data-role="header">
     <h1>My page</h1> 
</div>
<div role="main" class="ui-content">
<ul data-role="listview" data-inset="true" data-icon="false" class="gridUL">
<li data-role="list-divider">
            <div class="ui-grid-a bothGrids">
                <div class="ui-block-a">
                    <table class="halfGrid" style="width: 98%" >
                        <thead>
                            <tr><th>header 1</th><th>header 2</th><th>header 3</th></tr>
                        </thead>
                        <tbody>
                            <tr><td>content 1</td><td>Some bigger content in this cell</td><td>content 3</td></tr>
                            <tr><td>content 1</td><td>content 2</td><td>content 3</td></tr>
                        </tbody>
                    </table>

                </div>
                <div class="ui-block-b ">
                   <table class="halfGrid" style="width: 98%">
                         <thead>
                            <tr><th>header 1</th><th>header 2</th><th>header 3</th></tr>
                        </thead>
                        <tbody>
                            <tr><td>content 1</td><td>content 2</td><td>content 3</td></tr>
                            <tr><td>content 1</td><td>content 2</td><td>content 3</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>

</li></ul>  
    </div>
</div>

重要编辑

实际上，我想到将屏幕分成两部分并在每一面包裹一张桌子，这完全符合我的要求！我很高兴，我正在研究它好几个小时......感觉就像在圈子里跑，但它终于完成了！这是代码：

<强> HTML

.halfGrid {
margin-left: 1%;
margin-right: 1%;
border-spacing: 0;
border-collapse: collapse;

}

.halfGrid td, .halfGrid th {
border: 1px solid #aaa;
padding: 4px;
text-align: center;
width: 33%;
font-weight: normal;
white-space: normal;
}
.halfGrid th {
 font-weight: bold;
}

<强> CSS

<div class="wrap">
        <div class="fleft">
            <ul data-role="listview" data-inset="true" data-icon="false" style="min-width:350px">
                <li data-role="list-divider">
                    <div class="ui-grid-b">
                        <div class="ui-block-a" style="width:33%">PN</div>
                        <div class="ui-block-b" style="width:34%">Amendment</div>
                        <div class="ui-block-c" style="width:33%">Designation</div>
                    </div>
                </li>

            <!-- Data found -->
                <li> 
                    <a href="javascript:alert('Hello world');">
                        <div class="ui-grid-b">
                            <div class="ui-block-a" style="width:33%">Info1</div>
                            <div class="ui-block-b" style="width:34%">Info2</div>
                            <div class="ui-block-c" style="width:33%">Info3</div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="fright">
            <ul data-role="listview" data-inset="true" data-icon="false" style="min-width:350px">
                <li data-role="list-divider">
                    <div class="ui-grid-b">
                        <div class="ui-block-a" style="width:33%">PN</div>
                        <div class="ui-block-b" style="width:34%">Amendment</div>
                        <div class="ui-block-c" style="width:33%">Designation</div>
                    </div>
                </li>

            <!-- Data found -->
                <li> 
                    <a href="javascript:alert('Hello world');">
                        <div class="ui-grid-b">
                            <div class="ui-block-a" style="width:33%">Info1</div>
                            <div class="ui-block-b" style="width:34%">Info2</div>
                            <div class="ui-block-c" style="width:33%">Info3</div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

在这篇文章中找到了解决方案：Split page vertically using CSS并集成了我的代码部分。这是jsfiddle：http://jsfiddle.net/G6N5T/1211/

Answer 2

这个怎么样？

<ul data-role="listview" data-inset="true" data-icon="false">
    <li data-role="list-divider">
            <div class="ui-grid-b" style="width: 50%; float: left">
                <div class="ui-block-a column" >Header 1</div>
                <div class="ui-block-b column" >Header 2</div>
                <div class="ui-block-c column" >header 3</div>
            </div>
            <div class="ui-grid-b" style="width: 50%; float: left">
                <div class="ui-block-a column" >Header 1</div>
                <div class="ui-block-b column" >Header 2</div>
                <div class="ui-block-c column" >header 3</div>
            </div>
    </li>
</ul>

然后在你的CSS添加这个

.column{
   width:33%;
   float:left;
   /* you can optionally set a fixed height */
}

Answer 3

您可以在一个2列网格中嵌套两个3列网格：

<ul data-role="listview" data-inset="true" data-icon="false" class="gridUL">
    <li data-role="list-divider">
        <div class="ui-grid-a bothGrids">
            <div class="ui-block-a">
                <div class="ui-grid-b halfGrid">
                    <div class="ui-block-a cell">header 1</div>
                    <div class="ui-block-b cell">header 2</div>
                    <div class="ui-block-c cell">header 3</div>
                </div>
            </div>
            <div class="ui-block-b ">
                <div class="ui-grid-b halfGrid">
                    <div class="ui-block-a cell">Header 1</div>
                    <div class="ui-block-b cell">Header 2</div>
                    <div class="ui-block-c cell">header 3</div>
                </div>
            </div>
        </div>
    </li>
</ul>

.halfGrid {
    margin-left: 1%;
    margin-right: 1%;
}

.halfGrid .cell {
    border: 1px solid #aaa;
    padding: 4px;
    text-align: center;
}

更新了 FIDDLE

是否可以并排放置两个网格？

3 个答案: