标签: grid-layout

所以我正在创建一个网页,左侧的菜单是固定的(当您向上和向下滚动页面时,它们会跟随您).我目前正在使用网格布局:基础(由zurb)http://foundation.zurb.com/docs/grid.php.它使用十二列网格.我在定位固定布局和仍然同时使用网格时遇到问题.如何在页面上使用网格布局和固定元素？

<div class="container">
   <div class="row">
        <div class="four columns relativePosition">
              <div class="fixedPosition">
                   <div class="four columns">
                        Menu Here
                   </div>
              </div>
        </div>
        <div class="eight columns">
              Other Content
        </div>
   </div>
</div>

我能够使用这种结构使固定位置工作,但在某些情况下,菜单的内容变得太大并且与八列的内容重叠.我不知道是否有更好的方法来做到这一点？

我不确定他们两人之间的区别是什么以及我应该为我的父母使用哪些？

我要做的是创建一个带文本输入的自定义虚拟小键盘,它可以动态更改其内容以具有日期选择器.

所以我需要一个布局系统,它支持里面的许多不同大小的单元格.

哪个更适合我的需求,有什么区别？

我有一个JTabbedPane,其中2个JPanels设置为GridLayout(13,11).第一个JPanel有足够的单元格填充它离开空单元格.

第二个JPanel填充的单元格明显更少,这导致每个按钮被拉伸以填满整行.

有没有办法让GridLayout尊重空单元格,所以两个JPanels中的按钮大小相同？

在过去的一周里,我一直在拉着我的头发试图找出基本的R编码,但似乎无法到达任何地方(自2013年以来没有使用过R而不是它的一个很好的借口).

我想要的只是一个由32个.png文件组成的4x8网格(我制作的地图),我希望一次不加载一个图像文件(http://www.statmethods.net/advgraphs/layout) .html).

所以我想我可以在文件夹中加载图像(如果我的信念是bs,请纠正我)

img <- list.files(path='c:/a',patt='compo[0-32].*',full.names=T)

然后,我在的线也许在想 par(mfrow=c()),layout,grid.arrange(写PNG地块成R A pdf文件), (grid.raster？如何加入高效多RGL地块成一个单一的情节我已经在读了,并没有相应的试验- )导致任何有价值的东西..

后者我只使用以下结果

这让我傻笑.lattice无论如何,我真的不认为是这样的.

任何帮助将不胜感激!

我grid()用来将小部件放在tkinter窗口中.我试图在窗口的水平中心放置一个标签,让它保持在那里,即使窗口调整大小.我怎么能这样做？

pack()顺便说一句,我不想用.我想继续使用grid().

我正在尝试将我的Flexbox布局更改为新的display: grid,我有三列.

<div class="grid">
    <div class="three wide column"></div>
    <div class="two   wide column"></div>
    <div class="two   wide column"></div>
</div>

它看起来像这样:

是否可以指定一些列从右侧开始而不是从左侧开始,如下图所示？

(并且没有指定grid-column-start和grid-column-end,这可以通过margin-left: autoFlexbox完成)

<div class="grid">
    <div class="three wide column"></div>
    <div class="right floated two wide column"></div>
    <div class="right floated two wide column"></div>
</div>

有没有办法强制网格的最后一行中的所有项目填充行,无论它们有多少？

我不知道网格中的项目数量,因此我无法直接定位它们.我试图使用grid-auto-flow: dense,但它并没有真正帮助.

这是我的问题可视化: :

div {
  margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
span {
  height: 50px;
  background: blue;
}

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>  
</div>
 

我们正在编写一个针对ICS +的应用程序,并认为Gr​​idLayout是最好的布局范例,但似乎很少有关于它的文章,我们遇到了一些对齐问题.

<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/row_background"
    android:rowCount="1"
    android:columnCount="3"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:useDefaultMargins="true"
    android:background="@drawable/list_item_bg">

    <ImageView
        android:id="@+id/visibilityIcon"
        android:layout_row="0"
        android:layout_column="0"
        android:src="@drawable/visibility_icon" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"/>

    <ImageView
        android:id="@+id/windIcon"
        android:layout_row="0"
        android:layout_column="1"
        android:src="@drawable/wind_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"/>

    <ImageView
        android:id="@+id/crosswindIcon"
        android:layout_row="0"
        android:layout_column="2"
        android:src="@drawable/cloud_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"/>

</GridLayout>

但是,左侧2图标保持左对齐,最右侧图标以剩余空间居中.

基本上我们需要做的是将每列的大小指定为总屏幕大小的1/3(自3列).我认为这就是GridLayout所做的,但看起来'wrap_content'会导致这种行为(有意义),但'match_parent'会导致第一列填满整个屏幕,而不是填充其单元格,这是我预期的行为.

我们似乎已经尝试过重力,layout_gravity等的所有组合,但要么我们从根本上做错了什么,要么发现了GridLayout的限制.

谢谢你的帮助!

我有这个代码:

<?xml version="1.0" encoding="utf-8"?>

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="8"
    android:rowCount="8" >

    <ImageButton 
        android:src="@android:drawable/ic_menu_rotate"
        android:contentDescription="@null" />
    <ImageButton 
        android:src="@android:drawable/ic_menu_rotate"
        android:contentDescription="@null" />
    <ImageButton 
        android:src="@android:drawable/ic_menu_rotate"
        android:contentDescription="@null" />
    <ImageButton 
        android:src="@android:drawable/ic_menu_rotate"
        android:contentDescription="@null" />
    <ImageButton 
        android:src="@android:drawable/ic_menu_rotate"
        android:contentDescription="@null" />
    <ImageButton 
        android:src="@android:drawable/ic_menu_rotate"
        android:contentDescription="@null" />
    <ImageButton 
        android:src="@android:drawable/ic_menu_rotate"
        android:contentDescription="@null" />
    <ImageButton 
        android:src="@android:drawable/ic_menu_rotate"
        android:contentDescription="@null" />
    <ImageButton 
        android:src="@android:drawable/ic_menu_rotate"
        android:contentDescription="@null" />
    <ImageButton 
        android:src="@android:drawable/ic_menu_rotate"
        android:contentDescription="@null" />
    <ImageButton 
        android:src="@android:drawable/ic_menu_rotate"
        android:contentDescription="@null" />
    <ImageButton 
        android:src="@android:drawable/ic_menu_rotate"
        android:contentDescription="@null" />
    <ImageButton 
        android:src="@android:drawable/ic_menu_rotate"
        android:contentDescription="@null" />
    <ImageButton 
        android:src="@android:drawable/ic_menu_rotate"
        android:contentDescription="@null" />
    <ImageButton 
        android:src="@android:drawable/ic_menu_rotate"
        android:contentDescription="@null" />
    <ImageButton 
        android:src="@android:drawable/ic_menu_rotate"
        android:contentDescription="@null" />
    <ImageButton 
        android:src="@android:drawable/ic_menu_rotate"
        android:contentDescription="@null" />
    <ImageButton …

我正在使用 NopCommerce 制作 HTML 电子邮件模板。从那以后我把所有的 CSS 都放在内联中，但不起作用，在大多数情况下，除了网格样式之外，所有内容都有效。具体来说grid-gap，grid-template-columns它们在发送到 Gmail 后似乎就消失了。下面的代码片段是发送之前的原始代码。

<div class="grid-container" style="display: grid; grid-gap: 10px; background-color: white;margin-top:10px;left-padding: 10px; text-align:center; grid-template-columns: 33% 33% 33%;">
    <div style="background-color: #ebebe0;">
        <h1>Title 3</h1>
        <p>Lorem Ipsum</p>
    </div>
    <div style="background-color: #ebebe0;">
        <h1>Title 4</h1>
        <p>Lorem Ipsum</p>
    </div>
    <div style="background-color: #ebebe0;">
        <h1>Title 5</h1>
        <p>Lorem Ipsum</p>
    </div>
</div>

上面的图片取自 Gmail，正如您所看到的，grid-gap似乎grid-template-columns丢失了。任何人都可以给我指点或解决这个问题吗？非常感激。