标签: grid-layout

我想使用SWT为我的一个应用程序构建一个Master-Detail布局.

Container,Content,Sidebar和Part1是Composite实例.滚动是ScrolledComposite

所需的布局是这样的:

+--Container-------------------------------------+
|+--Content----------------------++--Sidebar----+|
||                               ||+--Part1----+||
||                               |||           |||
||                               |||           |||
||                               |||           |||
||                               |||           |||
||                               |||           |||
||                               ||+-----------+||
||                               ||+--Scrolled-+||
||                               |||           |||
||                               |||           |||
||                               |||           |||
||                               |||           |||
||                               |||           |||
||                               ||+-----------+||
|+-------------------------------++-------------+|
+------------------------------------------------+

内容应该可以水平和垂直地抓取所有空间.

侧边栏基本上是Part1和Scrolled的容器,它应该具有相同的高度.

Scrolled是Composite的容器,包含动态数量的子项,这些子项排列在内容合成中.因为子项的数量可能有很大的变化,所以这个Composite应该是可滚动的.

我现在用以下方式实现了这个:

• Container有一个包含2个列的GridLayout.

• 在内部,内容具有FILL_BOTH行为并且还获取所有HORIZONTAL/VERTICAL空间.

• 侧边栏有一个FillLayout(SWT.VERTICAL),包含Part1和Scrolled Childs.

问题: 当将大量项目放入滚动的复合材料中时,布局只会溢出可用空间,并且没有滚动可用的位置.

当我对容器使用FillLayout(SWT.HORIZONTAL)时,行为是所希望的,因为滚动并且一切都是"内部边界".

有没有办法在使用GridLayout时实现此行为,因为我希望内容占用大部分空间.

附上当前测试的SWT片段:

public class Scrolled {
    public static void main(String[] args) {
        Display display = new Display();
        Shell shell = new Shell(display);
        shell.setLayout(new GridLayout(2,false)); …

我想填充QGridLayout用QWidgets.在QWidgets需要出现在左上至右上的方式,并继续向下填补了下来每一行充满后QWidgets.类似且熟悉的GUI的一个例子是Apple如何在iPhone或iPad的主屏幕上对其应用程序进行分类.应用程序从左上角到右上角,并在每行填充后继续向下移动.

现在,每当我添加元素时,它们都会占据整个屏幕和/或不会彼此相邻添加.

这是我正在做的示例代码

m_gridLayout = new QGridLayout(this);
this->setLayout(m_gridLayout);
m_gridLayout->addWidget(widgetToBeAdded, m_currentRow, m_currentColumn, Qt::AlignLeft);

我按预期继续更新m_currentColumn和m_currentRow.在一定数量的列之后,我告诉它改为下一行,没有任何反应.我已通过调试确认它实际上正在吐出正确的行和列.)

最后,我需要抛出一个,QScrollArea以便可以向下滚动网格.

每个的大小都是QWidget一样的.如果我能够在正确分类网格方面获得任何帮助,我们将不胜感激.

编辑:使用下面的答案,我设法让我的项目按正确的顺序排序.但是,在垂直方向上的所有元素之间存在大量空间.正如我想的那样,改变verticalSpacing属性并不能避免这种情况.有谁知道怎么办？

我正在使用基于Twitter的Bootstrap的高级Wordpress主题.这个主题叫做StrapPress.我刚刚开始使用网格并试图以一种非常基本的方式进行设置,但是网格以奇怪的方式运行.我想要的是一个由九列组成的主要内容部分,以及一个三边栏.在九列中,我希望能够拥有具有不同内容区域的嵌套列:在一个页面上,第一个部分将是整个九列,然后它下面的内容将被分成三个相等的部分.

以下代码设置正常,没有9列中的第一部分:

<div class="row-fluid"> <!-- MAIN FLUID CONTAINER -->
    <div class="span9 redBorder" id="content"> <!-- MAIN CONTENT -->

        <div class="span4 redBorder">
            <div class = "contentPlaceholder">
                BLOG
            </div>
        </div>

         <div class="span4 redBorder">
            <div class = "contentPlaceholder">
                RECIPE
            </div>
        </div>

         <div class="span4 redBorder">
            <div class = "contentPlaceholder">
                LISTING
            </div>
        </div>

    </div> <!-- END OF MAIN CONTENT -->

    <div class="span3 redBorder" id="sidebar" style="height: 450px;"> <!-- SIDEBAR -->
        SIDE
    </div> <!-- END SIDEBAR -->

</div> <!-- END OF MAIN FLUID CONTAINER -->

'redBorder'只是在所有东西周围添加1px红色边框以帮助可视化.

但是,只要我添加下一部分,它就会影响其下方的内容.这是新代码:

 <div …

我正在使用一个简单的GridLayout动态添加按钮.

<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/tagGridLayout"
android:background="@color/white"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnCount="3"
>
</GridLayout>

我正在使用这个Java代码来填充我的网格,除了设置的Gravity选项没有做任何事情之外,它都工作正常.我已经尝试过 - 将layout_width更改为XML文件中的不同类型,将重力添加GridLayout到此站点上的其他解决方案中.另一件需要注意的事情是我在片段中的异步任务中执行此操作.基本上我想实现layout_gravity="fill_horizontal"XML中的成就.

tagButtons = new Button[trendingTagsCount];
        for(int i=0;i<trendingTagsCount;i++)
        {
            tagButtons[i] = new Button(getActivity());
            //tagButtons[i].setLayoutParams(new LayoutParams(Gravity.FILL_HORIZONTAL));
            tagButtons[i].setText(getTagsList.get(i).tag);
            tagButtons[i].setGravity(Gravity.FILL_HORIZONTAL);
            tagButtonGrid.addView(tagButtons[i]);
        }

我想创建一个响应式图像网格,它总是在Bootstrap中平方.

到目前为止,我得到了这个:Jsfiddle Link

这部分强制元素始终被平方:

.frontpage_square {
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}

.frontpage_square img {
    position:absolute;
}

左边较大的方块和右边的九个小方块是正确的,但我无法弄清楚如何在整个高度上展开右边的九个方块.所以基本上他们应该采取左,更大的正方形的整个高度.

我想用Java Swing创建以下GUI.

由于我对Java Swing没有足够的经验,我不确定如何精确地重新创建该GUI.

我尝试过使用GridLayout,它看起来像这样:

我已经尝试过其他的LayoutManagers,但由于我的经验不足,我无法获得任何与我想要实现的GUI类似的东西.

我可能不得不使用GridBagLayout,但我已经尝试过,根本无法完成任何事情.我不确定如何使用GridBagLayout,特别是因为所需的colums数量存在差异(2,2和3).

以下是用于创建第二个GUI的代码:

import java.awt.*;
import javax.swing.*;

public class GUITest extends JFrame {

public GUITest() {
    super("Testing Title");
    Container pane = getContentPane();

    pane.setLayout(new GridLayout(3,1));

    pane.add(getHeader());
    pane.add(getTextArea());
    pane.add(getButtonPanel());

}

public JComponent getHeader() {
    JPanel labelPanel = new JPanel();
    labelPanel.setLayout(new GridLayout(1,2));
    labelPanel.setSize(getPreferredSize());

    JLabel labelLocal = new JLabel("Left value: ", JLabel.CENTER);
    JLabel labelDB = new JLabel("Right value: ", JLabel.CENTER);

    labelPanel.add(labelLocal);
    labelPanel.add(labelDB);

    return labelPanel;
}

public JComponent getTextArea() {
    JPanel textPanel = new JPanel();
    textPanel.setLayout(new GridLayout(1,2,5,0));

    JTextArea testTextArea = …

基于上一个问题,我正在尝试为我的网格布局添加更大的块.在最后一个问题中,我需要一个div跨度多行.现在的问题是我需要一个div来跨越多个行和列.

如果我有一个五行元素,我怎么能在它的中间放置更大的元素？(因为float它自然而然地放在一边).

这是一个示例代码段:

#wrapper{
  width: 516px;
}
.block{
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}
.bigger{
  height: 110px;
}
.larger{
  height: 110px;
  width: 190px;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block larger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

我不想display: grid用于包装元素,因为我可以使用 状态这是一个非常先进的技术.我希望有一个非网格,非表格解决方案.

以下是我希望从上面的代码段中获得的内容

这就是我需要的:

桌面: B A

移动:

A
B

这是我的HTML:

<div class="row">

    <div class="col-md-7 col-sm-7 push-md-5">
        A
    </div>

    <div class="col-md-5 col-sm-5 pull-md-7">
        B
    </div>

</div>

它在移动设备上的顺序正确,但在桌面上没有.我尝试了几个指南和帮助材料,但没有运气.在大多数指南中,它们移动的是相同的列,如4或6,所以清楚地理解它有点令人困惑.

对于页面上的一个部分,我试图显示两个矩形div,它们在两个方形div之间堆叠,与两个堆叠div的高度一样大,这些div内部是img标签.

我正在使用此标记,因为在移动设备上我希望能够将它们放在带有overflow: hidden父级的未包装的弹性行上,这样我就可以使用滑动代码来转换X轴.我在使用这个标记使用flexbox创建这种桌面布局时遇到了问题(没有网格,需要支持IE11).有没有人用这个标记完成这个布局？谢谢.

 <div class="flex_container">
   <div class='flex_child square'>
     <img...>
   </div>
   <div class='flex-child rect'>
     <img...>
   </div>
   <div class='flex-child rect'>
     <img...>
   </div>
   <div class='flex-child square'>
     <img...>
   </div>
 </div>

我正在尝试构建一个包含卡片状物品的网格.每种类型的单元格(标题,图像,文本,按钮,......)每行应具有相同的高度,由最大单元格的内容决定,如下面的代码段所示.

现在我试图限制列的数量,并让卡片换行,就好像我flex-wrap: wrap;在基于flexbox的解决方案中使用的那样.列数应通过媒体查询确定.如果不使用尚未支持的子网格,这可能吗？

另外,使用子网格的解决方案如何？我想它会降级到当前浏览器中高度不等的单元格？

.grid {
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-auto-columns: auto;
}

<div class="grid">

  <h2 class="a">Header 1</h2>
  <img class="b" src="https://placekitten.com/400/100" />
  <p class="c">text
  </p>
  <button class="d">Button</button>

  <h2 class="a">Header 2 is longer and may span multiple lines</h2>
  <img class="b" src="https://placekitten.com/400/100" />
  <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et cursus ligula. Maecenas non pharetra dui, eu tincidunt mi. Vivamus vitae luctus risus. Etiam vehicula sem est.
  </p>
  <button …