标签: grid-layout

适用于Android 4的新GridLayout很不错.在代码可维护性和性能方面.

我想为旧版本的GridLayout向后兼容提供帮助.等待官方兼容包的时间太长了.我知道它可能,并且有人提到可以通过从版本4平台源复制类来完成.

如果有人能指导我如何做到这一点真的很棒.

如需参考,请在Google Plus上查看此帖子 https://plus.google.com/105051985738280261832/posts/KbqAxUQTzVf

我正在将我的登陆页面从Bootstrap转换为Semantic-UI.该页面的位置固定在顶部导航栏上.主要内容分为两列(3-cols和9-cols).左列用于显示侧栏,右栏用于显示当前内容.

我试图复制并粘贴Semantic-UI的演示页面.导航栏高45px.我注意到第一个45px的主要内容是重叠的.

<link href="//semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<script src="//semantic-ui.com/dist/semantic.min.js"></script>

<div id="navbar" class="ui fixed inverted main menu">
  <div class="container">
    <div class="title item">
      <b>Dashboard</b>
    </div>
  </div>
</div>

<div id="maincontent" class="ui bottom attached segment pushable">
    
  <div id="sidebar" class="ui visible left vertical sidebar menu">
    <a class="item">First Item</a>
    <a class="item">Second Item</a>
    <a class="item">Third Item</a>
    <a class="item">Fourth Item</a>
    <a class="item">Fifth Item</a>
  </div>
    
  <div id="content" class="pusher">
    <div class="ui basic segment">
      <h3 class="ui header">Application Content</h3>
      <p>First paragraph...</p>
      <p>Second paragraph...</p>
      <p>Third paragraph...</p>
    </div>
  </div>

</div>

我目前的解决方法是在导航栏后添加一个45px高的占位符.

<div style="height:45px"></div>

我很确定有一些好的CSS样式名称可以修复内容重叠.

我正在尝试使用bootstrap网格系统制作一个表.我知道我们每行应该只使用12列.但我希望有超过12列,整个表格都有水平滚动.所以我正在尝试使用以下代码片段

<span class="col-md-2" style="text-align: center;"><b>Field 1</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 2</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 3</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 4</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 5</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 6</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 7</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 8</b></span>

我想在一行中显示如上所述的8个字段.但是在第6场之后,其他两个领域正在下降.有没有办法让所有8个字段在单行中与水平滚动.

从我几十年来手工编码HTML的经验来看,我已经了解到<form>,<fieldset>这些只是一些block级别的元素<div>.从CSS的角度来看,它们在定位和尺寸方面的表现相同.(请耐心等待,我在这里忽略像IE6这样的老浏览器.)....或者我认为....

*在我继续之前,我必须声明我在大多数时间使用Firefox进行开发和测试.

我参加了一个有很多<form>和<fieldset>整个地方的项目.为了简化我的问题,我有类似的东西:

<form>
  <fieldset>
    <div class="gridChild">...</div>
    <div class="gridChild">...</div>
    <div class="gridChild">...</div>
  </fieldset>
</form>

我想让gridChild divs在各个列的布局中.所以我有CSS的东西:

fieldset {
  display: grid;
  grid-template-columns: 50px 2fr 6fr 6fr auto ....;
} 

它奏效了.它在我的屏幕上完美显示了这些列...它适用于Firefox,Android甚至Edge.截止日期已逾期.我很匆忙,我没有在Chrome上测试它.我认为如果Firefox和Edge工作正常,那么Chrome也应该工作,对吧？或者我认为......后来,我发现这对Chrome无效.Chrome上的网格布局完全被忽略.我花了几天时间来调试问题.

经过几个不眠之夜,我发现这display:grid不起作用<fieldset>.它必须应用于<div>Chrome才能运行.这对我来说是惊喜,因为我一直在做这么多的CSS定位,就像漂浮,绝对定位等在跨浏览器的方式<form>,并<fieldset>和他们一直表现得就像<div>所有的时间.但为什么不进行网格布局呢？这是Chrome的错误,还是这种行为设计得像那样？因为我发现这不是Firefox,Edge和Android的问题.

我能想到的一个简单的解决方法是包装<div>内部<fieldset>,如下所示:

<form>
  <fieldset><div class="gridParent">
    <div class="gridChild">...</div>
    <div class="gridChild">...</div>
    <div class="gridChild">...</div>
  </div></fieldset>
</form>

但正如我之前说的,我已经<form>和<fieldset>所有的地方.如果我可以避免更改HTML结构,那将是最好的.我写这篇文章是为了寻找一个CSS解决方案/ hack,所以我不必重复编写数百条HTML行.

我需要创建一个水平布局,其中一个块占用所有可用空间,而另一个块缩小以适合其内容.

例如:

<div class="grid">
    <div class="expand">Long text label</div>
    <div class="shrink">Button</div>
</div>

一个更复杂的示例,有两行(实际网格):

<div class="grid">
    <div class="row">
        <div class="shrink">...</div>
        <div class="expand">...</div>
        <div class="shrink">...</div>
        <div class="shrink">...</div>
    </div>
    <div class="row">
        <div class="shrink">...</div>
        <div class="expand">...</div>
        <div class="shrink">...</div>
        <div class="shrink">...</div>
    </div>
</div>

我的要求:

1. 即使很短,大块也应该填满所有可用空间
2. 小块应符合其内容
3. 大块(通常是文本标签)可能是比可用空间大的单个字,因此在这种情况下应该截断
4. 如果是多字,大块不应该换行
5. 小块不应该换行(虽然在多个按钮或图标的情况下,这可以通过为每个组件制作一个块来解决)
6. 支持多行(即列应对齐)

我的目标是Android和iOS智能手机.

我试图调整这个答案的代码,但我无法让它适用于多行.此外,源代码必须是乱序的,这是令人困惑的(虽然我的用例没有阻塞).这是一个jsfiddle:http://jsfiddle.net/k3W8L/

我正在尝试从一个被调用的方法中设置项目,FootballClub到目前为止它很好.但后来我从它创建了一个arrayList,我不知道怎么找不到将这些信息存储到JTable中的方法.问题是我找不到设置固定行数的方法

这是我的代码:

类StartLeague:

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

public class startLeague implements LeagueManager{

//setting the frame and other components to appear

public startLeague(){
    JButton createTeam = new JButton("Create Team");
    JButton deleteTeam = new JButton("Delete Team");

    JFrame frame = new JFrame("Premier League System");
    JPanel panel = new JPanel();
    frame.setSize(1280, 800);
    frame.setVisible(true);
    frame.add(panel);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    String col[] = {"Pos","Team","P", "W", "L", "D", "MP", "GF", "GA", "GD"};

    panel.setLayout(new GridLayout(20, 20));
    panel.add(createTeam);
    panel.add(deleteTeam);
    panel.add(new JLabel(""));
    //JLabels to fill the space
    }
    } …

我有一个简单的棋盘在JPanel与GridLayout(8,8)作为布局管理器.

我正在尝试为字段的列名和行号添加面板.

现在我已经创建了另一个面板BorderLayout作为布局管理器,在这个面板中我添加了板BorderLayout.CENTER.旁边的板本身我添加了一个面板GridLayout(0,8)中BorderLayout.SOUTH和面板GridLayout(8,0)中BorderLayout.WEST.行数完全放在电路板旁边,因为左侧JPanel中的行数与电路板中的行数相匹配,但列名称(A,B,C,D,E,F,G,H)在由于JPanel的原因,板下的JPanel放置不正确BorderLayout.WEST.

如何制作带侧板的合适棋盘以显示场地编号/名称？

我已经尝试将南面板的布局设置为GridLayout(0,9)第一个字段为空,但左面板的宽度不等于电路板中的每个字段,因此这不是一个好的解决方法.

使用bootstrap的网格时,连续标记单个全宽列的最佳方法是什么？

你是否必须使用容器和行来保存列(.container > .row > .col-xs-12 > .actual-content),或者你可以完全摆脱行和列,只需使用包装容器(.container > .actual-content)？

让我们说吧

<div class="container">
  <div class="row">
    <!-- multiple columns -->
  </div>

  <div class="row">
    <div class="col-xs-12">
      <p>Actual content goes here. It will span the entire width.</p>
    </div>
  </div>

  <div class="row">
    <!-- multiple columns -->
  </div>
</div>

VS

<div class="container">
  <div class="row">
    <!-- multiple columns -->
  </div>

  <p>Actual content goes here. It will span the full width.</p>

  <div class="row">
    <!-- multiple columns -->
  </div>
</div>

一种方法被认为优于另一种吗？由于列跨越所有介质尺寸的整个宽度,因此我不需要任何响应功能.渲染输出应该是相同的,但也许有一些我不知道的细微差别.使用容器,行和列似乎有点矫枉过正......

我创建了一个包含大量文本的网格.我希望文本根据屏幕大小自动调整.我试过以下代码,

    DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
    float dpWidth = displayMetrics.widthPixels / displayMetrics.density;
    int noOfColumns = (int) (dpWidth / 50);
    return noOfColumns;

我想输出这样的东西

] 2

它根据我的需要不起作用.请帮忙 .提前致谢.

我正在尝试使用css网格布局创建砌体布局.网格中的所有项目都具有可变高度.我不知道会有什么东西.所以我不能grid-row为每个项目定义.是否可以在列中的上一个结尾之后立即启动每个新项目？

代码我正在尝试:

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, 330px);
  align-items: flex-start;
  grid-column-gap: 10px;
  grid-row-gap: 50px;
}

.item {
  background: black;
  border-radius: 5px;
}

<div class="wrapper">
  <div class="item" style="height:50px"></div>
  <div class="item" style="height:100px"></div>
  <div class="item" style="height:30px"></div>
  <div class="item" style="height:90px"></div>
  <div class="item" style="height:80px"></div>
  <div class="item" style="height:50px"></div>
  <div class="item" style="height:70px"></div>
  <div class="item" style="height:40px"></div>

</div>

完整的codepen在这里