标签: layout

如何复制pinterest.com的绝对div堆叠布局

我希望复制Pinterest.com的div布局,特别是如何调整列数以适应更多/更少的浏览器调整大小,垂直堆叠不依赖于相邻的列高度.源代码显示每个div都是绝对位置.联合创始人回答了一个Quora帖子,说明它是用自定义jQuery和CSS完成的.我希望结果从左到右排序.您可以提供任何方向来自己制作它将非常感激.

css jquery layout

104
推荐指数
3
解决办法
6万
查看次数

leftAnchor和leadingAnchor之间的区别?

我一直在使用Swift for iOS中的约束,并且大多数命名约定/文档使事情变得非常自我解释,但最近让我困惑的一件事是两对NSLayoutXAxisAnchor类:

leadingAnchor, leftAnchor
Run Code Online (Sandbox Code Playgroud)

随着

trailingAnchor, rightAnchor
Run Code Online (Sandbox Code Playgroud)

当我在iOS应用程序中以编程方式设置约束时,我发现我可以完全互换使用这些约束.如果我使用leadingAnchor,运行app并观察行为,然后使用leftAnchor,运行app并观察行为,它的功能完全相同.

我查看了developer.apple.com的文档,结果甚至完全相同(忽略了名称的不同).例如,比较leadingAnchor和leftAnchor:

"使用此锚点创建具有视图前沿的约束.您只能将此锚点与NSLayoutXAxisAnchor锚点的子集组合.您可以将leadingAnchor与另一个leadingAnchor,trailingAnchor或centerXAnchor组合.有关更多信息,请参阅NSLayoutAnchor类参考."

相比于:

"使用此锚点创建视图左边缘的约束.您只能将此锚点与NSLayoutXAxisAnchor锚点的子集组合.您可以将leftAnchor与另一个leftAnchor,rightAnchor或centerXAnchor组合.有关更多信息,请参阅NSLayoutAnchor类参考."

有谁知道这些属性之间是否存在任何预期的差异?

layout ios

104
推荐指数
1
解决办法
1万
查看次数

Android:使用FrameLayout将按钮对齐到屏幕的右下角?

我试图将地图的缩放控件放在屏幕的右下角.我可以使用Both alignParentBottom="true"和RelativeLayout来做alignParentRight="true",但是使用Framelayout我没有找到任何这样的属性.如何将其与屏幕右下角对齐?

layout android

103
推荐指数
7
解决办法
14万
查看次数

你可以在不使用表格的情况下进行HTML布局吗?

好吧,我一两周前有一个简单的布局问题.即页面的部分需要标题:

+---------------------------------------------------------+
| Title                                            Button |
+---------------------------------------------------------+
Run Code Online (Sandbox Code Playgroud)

非常简单的东西.桌面仇恨似乎已经在Web世界中占据了,当我问为什么使用HTML表单的定义列表(DL,DD,DT)标签而不是表格时,我被提醒了 现在已经讨论过表vs divs/CSS的一般主题,例如:

因此,这不是关于CSS与布局表格的一般性讨论.这只是一个问题的解决方案.我使用CSS尝试了以上的各种解决方案,包括:

  • 浮动按钮或包含按钮的div;
  • 相对于按钮的位置; 和
  • 位置相对+绝对.

由于各种原因,这些解决方案都不令人满意.例如,相对定位导致z-index问题,其中我的下拉菜单出现在内容下.

所以我最终回到:

<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
  <td class="group-title">Title</td>
  <td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)

而且效果很好.它很简单,因为它具有向后兼容性(即使在IE5上也可以工作)并且它只是起作用.没有搞乱定位或花车.

所以任何人都可以做没有表的等价物吗?

要求是:

  • 向后兼容:到FF2和IE6;
  • 合理一致:跨越不同的浏览器;
  • 垂直居中:按钮和标题具有不同的高度; 和
  • 灵活:允许合理精确控制定位(填充和/或边距)和样式.

在旁注中,我今天看到了几篇有趣的文章:

html css layout

101
推荐指数
5
解决办法
6万
查看次数

将div定位在另一个div的底部附近

我有外部div和内部div.我需要将内部div放在外部底部.

外部div是弹性的(宽度:例如70%).我还需要居中内部区块.

所描述化妆的简单模型如下图所示:

在此输入图像描述

html css layout

101
推荐指数
4
解决办法
9万
查看次数

带有ListView和按钮的Android布局

好吧,这个特定的布局让我烦恼.并且似乎无法找到一种方法来使用listView,底部有一排按钮,因此listview不会延伸到按钮顶部,因此按钮始终会捕捉到屏幕底部.这就是我想要的:

删除了死的ImageShack链接

看起来它应该很容易,但我尝试过的一切都失败了.有帮助吗?

这是我目前的代码:

    RelativeLayout container = new RelativeLayout(this);
    container.setLayoutParams(new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));

    //** Add LinearLayout with button(s)

    LinearLayout buttons = new LinearLayout(this);

    RelativeLayout.LayoutParams bottomNavParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    bottomNavParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
    bottomNavParams.addRule(RelativeLayout.CENTER_HORIZONTAL);
    buttons.setLayoutParams(bottomNavParams);


    ImageButton newLayer = new ImageButton(this);
    newLayer.setImageResource(R.drawable.newlayer);
    newLayer.setLayoutParams(new LinearLayout.LayoutParams(45, LayoutParams.FILL_PARENT));
    buttons.addView(newLayer);

    container.addView(buttons);

    //** Add ListView

    layerview = new ListView(this);

    RelativeLayout.LayoutParams listParams = new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
    listParams.addRule(RelativeLayout.ABOVE, buttons.getId());

    layerview.setLayoutParams(listParams);

    container.addView(layerview);
Run Code Online (Sandbox Code Playgroud)

java layout android listview

101
推荐指数
4
解决办法
9万
查看次数

WPF ColumnDefinition中*(星号)的含义?

下面的XAML中*(星号)是什么意思?

<ColumnDefinition Width="0.07*"/>
<Grid Height="100" HorizontalAlignment="Left" 
      Margin="102,134,0,0" 
      Name="grid1" VerticalAlignment="Top" 
      Width="354">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="40*" />
        <ColumnDefinition Width="314*" />
    </Grid.ColumnDefinitions>
</Grid>
Run Code Online (Sandbox Code Playgroud)

wpf grid layout xaml

101
推荐指数
1
解决办法
6万
查看次数

如何根据父视图的尺寸调整Android视图的大小

如何根据其父布局的大小调整视图大小.例如,我有一个RelativeLayout填满整个屏幕,我想要一个儿童视图,比如说ImageView,占据整个高度,宽度的1/2?

我试图重写所有的onMeasure,onLayout,onSizeChanged,等我无法得到它的工作....

layout android

100
推荐指数
5
解决办法
15万
查看次数

增加y轴上文本和标题之间的距离

y轴标题显得太靠近轴文本.

ggplot(mpg, aes(cty, hwy)) + geom_point()
Run Code Online (Sandbox Code Playgroud)

ggplot输出

我试过改变许多参数的值,theme()但似乎没有任何帮助.

layout plot r ggplot2

99
推荐指数
3
解决办法
10万
查看次数

Android的换行小部件布局

我正在尝试创建一个向用户显示一些数据的活动.数据可以分为"单词",每个单词都是一个小部件,"单词"序列将形成数据("句子"?),包含单词的ViewGroup小部件.由于"句子"中所有"单词"所需的空间将超过显示器上的可用水平空间,我想像正常的文本一样包装这些"句子".

以下代码:

public class WrapTest extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        LinearLayout l = new LinearLayout(this);
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.FILL_PARENT,
                LinearLayout.LayoutParams.WRAP_CONTENT);
        LinearLayout.LayoutParams mlp = new LinearLayout.LayoutParams(
                new ViewGroup.MarginLayoutParams(
                        LinearLayout.LayoutParams.WRAP_CONTENT,
                        LinearLayout.LayoutParams.WRAP_CONTENT));
        mlp.setMargins(0, 0, 2, 0);

        for (int i = 0; i < 10; i++) {
            TextView t = new TextView(this);
            t.setText("Hello");
            t.setBackgroundColor(Color.RED);
            t.setSingleLine(true);
            l.addView(t, mlp);
        }

        setContentView(l, lp);
    }
}
Run Code Online (Sandbox Code Playgroud)

产生类似左图的东西,但我想要一个布局呈现相同的小部件,如右图所示.

非包装

包皮

是否有布局或布局和参数的组合,还是我必须为此实现自己的ViewGroup?

java layout user-interface android

95
推荐指数
6
解决办法
5万
查看次数

标签 统计

layout ×10

android ×4

css ×3

html ×2

java ×2

ggplot2 ×1

grid ×1

ios ×1

jquery ×1

listview ×1

plot ×1

r ×1

user-interface ×1

wpf ×1

xaml ×1